如何使用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更改列表中圖片的邊框？

回答

相關問題