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

我正在尝试使一个图像在鼠标悬停时获得边框。但是，由于图片位于列表中，当鼠标悬停在图像上时，整个列表项将获得特定的边框，而不仅仅是图像。CSS如下所示：

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

下面是一个比我解释得更好的JSFIDLE：

我希望只在图像上设置边框，而不是在整个列表项上设置边框。使用CSS如何做到这一点？先谢谢你

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

这就行了

---

在悬停时选择img标记，然后在其中添加边框

当前您正在选择父项-您需要选择

：

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

而且，

id

应该是唯一的。确保

myImgDesign

是一个类，而不是像您在小提琴中演示问题那样使用。

这应该是可行的

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

希望这有帮助

#myImgDesign img:悬停{
不透明度：0.8；
转化来源：25%50%；
变换：比例（1.095，1.095）；
边框样式：虚线；
}
诺布利特{
列表样式：无；
}

执行以下操作 #myimgdesignimg:hover{blablabla}

您可以添加此

li {
  display: inline-block;
}

希望我能帮助你。问候。

.gallerycontainer{
位置：相对位置；
/*添加高度属性并设置为最大图像高度以防止重叠*/
}
.缩略图像{
边框：1px纯白；
边距：0 5px 5px 0；
宽度：80px；
高度：80px；
}
.缩略图：悬停{
背景色：透明；
}
.缩略图：悬停img{
边框：1px纯蓝色；
}
.thumbnail span{/*CSS用于放大图像*/
位置：绝对位置；
背景颜色：浅黄色；
填充物：5px；
左：-1000px；
边框：1px灰色虚线；
可见性：隐藏；
颜色：黑色；
文字装饰：无；
}
.放大图像的缩略图跨度img{/*CSS*/
边框宽度：0；
填充：2px；
}
.缩略图：悬停span{/*CSS用于放大图像*/
能见度：可见；
排名：0；
左：230px；/*放大图像应水平偏移的位置*/
z指数：50；
}

< /代码>将IMG放在选择器中？请让我们知道什么对你起作用，并考虑接受答案，如果他们中的任何一个请在问题本身中提供所有相关代码，而不是在第三方站点上。