如何使用CSS更改列表中图片的边框？

-2

我想让鼠标悬停在图像上时会出现边框。但是，因为图片在列表中，所以当鼠标悬停在图片上时，整个列表项将获取特定的边框，而不仅仅是图片。该CSS如下：如何使用CSS更改列表中图片的边框？

#myImgDesign:hover { 
    opacity: 0.8; 
    transform-origin: 25% 50%; 
    transform: scale(1.095, 1.095); 
    border-style: dotted 
}

这里有一个的jsfiddle解释它比我好得多：

https://jsfiddle.net/jr2zmpms/6/

我想有边框仅在图像上设置，而不是在整个列表项目。这怎么可能使用CSS？先谢谢你。

来源

2016-11-09 Áron L.

认沽IMG？ – csmckelvey

请让我们知道什么对你有用，并考虑接受答案，如果他们中的任何人工作 – Geeky

请在问题本身，而不是在第三方网站上提供所有相关的代码[mcve]。 –

#myImgDesign:hover img { 
    opacity: 0.8; 
    transform-origin: 25% 50%; 
    transform: scale(1.095, 1.095); 
border-style: dotted; 
}

这样做。

您在悬停时选择img标签，然后在那里添加边框。

来源

2016-11-09 17:28:13

您目前选择父 - 你需要有<img>选择本身：

#myImgDesign>img:hover { 
    opacity: 0.8; 
    transform-origin: 25% 50%; 
    transform: scale(1.095, 1.095); 
    border-style: dotted 
}

此外，id的都应该是独一无二的。确保myImgDesign是一个类，而不是用你在你的小提琴中演示你的问题的方式。

来源

2016-11-09 17:30:58

这应该工作

#myImgDesign img:hover { 
    opacity: 0.8; 
    transform-origin: 25% 50%; 
    transform: scale(1.095, 1.095); 
    border-style: dotted; 
}

希望这有助于

#myImgDesign img:hover { 
 
    opacity: 0.8; 
 
    transform-origin: 25% 50%; 
 
    transform: scale(1.095, 1.095); 
 
    border-style: dotted; 
 
} 
 

 
ul.nobullet { 
 
    list-style: none; 
 
}

<ul class="row-img nobullet"> 
 
    <li id="myImgDesign"><img style="width:100px; height:100px;" src="ruhaszinek/black.jpg"></li> 
 
    <li id="myImgDesign"><img style="width:100px; height:100px;" src="ruhaszinek/blue.jpg"></li> 
 
    <li id="myImgDesign"><img style="width:100px; height:100px;" src="ruhaszinek/green.jpg"></li> 
 
    <li id="myImgDesign"><img style="width:100px; height:100px;" src="ruhaszinek/orange.jpg"></li> 
 
    <li id="myImgDesign"><img style="width:100px; height:100px;" src="ruhaszinek/red.jpg"></li> 
 
    <li id="myImgDesign"><img style="width:100px; height:100px;" src="ruhaszinek/yellow.jpg"></li> 
 
</ul>

希望这有助于

来源

2016-11-09 17:33:17 Geeky

做 #myImgDesign IMG：悬停{} blablabla

来源

2016-11-09 17:52:17 k2a

您可以添加此...

li { 
    display: inline-block; 
}

希望我可以帮助你。问候。在选择

来源

2016-11-10 03:51:14

.gallerycontainer{ 
 
position: relative; 
 
/*Add a height attribute and set to largest image's height to prevent overlaying*/ 
 
} 
 

 
.thumbnail img{ 
 
border: 1px solid white; 
 
margin: 0 5px 5px 0; 
 
width:80px; 
 
height:80px; 
 
} 
 

 
.thumbnail:hover{ 
 
background-color: transparent; 
 
} 
 

 
.thumbnail:hover img{ 
 
border: 1px solid blue; 
 
} 
 

 
.thumbnail span{ /*CSS for enlarged image*/ 
 
position: absolute; 
 
background-color: lightyellow; 
 
padding: 5px; 
 
left: -1000px; 
 
border: 1px dashed gray; 
 
visibility: hidden; 
 
color: black; 
 
text-decoration: none; 
 
} 
 

 
.thumbnail span img{ /*CSS for enlarged image*/ 
 
border-width: 0; 
 
padding: 2px; 
 
} 
 

 
.thumbnail:hover span{ /*CSS for enlarged image*/ 
 
visibility: visible; 
 
top: 0; 
 
left: 230px; /*position where enlarged image should offset horizontally */ 
 
z-index: 50; 
 
}

<div class="gallerycontainer"> 
 

 
<a class="thumbnail" href="#thumb">Ship 1<span><img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" /></span></a> 
 

 
<br /> 
 

 
<a class="thumbnail" href="#thumb">Ship 2<span><img src="https://wallpapers.pub/web/wallpapers/birds-water-spray-wallpaper/3840x2160.jpg" /></span></a> 
 

 
</div>

来源

2016-11-10 04:06:11

如何使用CSS更改列表中图片的边框？

回答

相关问题