Question

所有

我知道有一些关于这个问题的帖子，但这些建议似乎没有用。我在这做错了什么？

这是片段。 css中未注释掉的第一部分将在悬停时将不透明度应用于我的两张图片。

当删除第一个块并在第二个块中注释时，它假设仅定位delta.jpg图像并应用不透明度，使shh.png图像不受影响。

.wsite-image-border-none img:hover {
  opacity: 0.5;
}

/*
.wsite-image-border-none img[src="image\delta.jpg"]:hover {
  opacity: 0.5;
}
*/

<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0">
	<a><img src="image\shh.png" alt="Picture" style="width:293;max-width:100%"></a>
	<a><img src="image\delta.jpg" alt="Picture" style="width:293; max-width:100%"></a>
	<div style="display:block;font-size:90%"></div>
</div>

我试图在我的网站上做这个，我没有100％控制HTML。需要在CSS中执行此操作。

由于

Answer 1

\字符具有特殊含义;它用于escape characters。

如果您想匹配单个\字符，则需要使用其中两个\\：

.wsite-image-border-none img[src="image\\delta.jpg"]:hover {
  opacity: 0.5;
}

img[src="image\\delta.jpg"]:hover {
  opacity: 0.5;
}

<img src="image\delta.jpg" />

但是，正如评论中所指出的，由于路径通常使用正斜杠，您实际上可能需要：

.wsite-image-border-non img[src="image/delta.jpg"]:hover {
  opacity: 0.5;
}

img[src="image/delta.jpg"]:hover {
  opacity: 0.5;
}

<img src="image/delta.jpg" />

Answer 2

你可以在css中使用nth-of-type选择器来更具体。

.wsite-image-border-none a:nth-of-type(2) img:hover {
    opacity: 0.5;
}

Answer 3

我希望这有帮助。您还可以尝试在单独的div中插入图像并为该图像设置样式。

如何使用css定位特定的img

3 个答案: