Question

我已经检查了其他问题，但它们不适用于我的案子，我不确定是否可能。

悬停图像时，我需要更换图像。

我无法使用javascript或更改html。我只能使用CSS。

我使用可见性尝试了很多方法，甚至设法做到了。在img上，并在父级上应用背景图片。

但是，它变得无用了，因为img标签是操作所在。

HTML

 <ul class="or-body-icons ZERO">
    <li id="liIconDest-or1">
       <img id="iconDest-or1" tabindex="-1" alt="Negócios" src="https://img2.gratispng.com/20180320/bke/kisspng-computer-icons-clip-art-sales-ico-5ab10c441b8ca8.6504430515215524521129.jpg" title="Negócios" style="cursor: pointer" width="16" height="16" border="0">
    </li>
 </ul>

CSS

.ZERO {
padding: 0;
margin: 0;
border: 0;
}

#iconDest-or1{
 width:150px;
 height:100px;
 position: relative;
 z-index: 1;
}


#liIconDest-or1:hover {
 box-sizing: border-box;
 background-image: url(https://img2.gratispng.com/20180304/rde/kisspng-ico-pencil-icon-pencil-5a9c43a0652ef3.9860290115201903684145.jpg);
 background-size: 320px;
 background-repeat: no-repeat;
 cursor: pointer;
 z-index: 10;
 position: relative;
 width:320px;
 height:320px;
 }

ul.or-body-icons li {
list-style-type: none;
float: left;
width: auto;
height: 16px;
line-height: 16px;
margin: 3px 2px;
padding: 0;
}

Answer 1

您可以在li元素上添加一些CSS，以在li悬停时隐藏其中的任何图像。这样可以解决将鼠标悬停在img上时应用“可见性：隐藏”的问题：

#liIconDest-or1:hover img {
  visibility: hidden;
}

Answer 2

您可以使用悬停伪选择器更改背景图像：

https://jsfiddle.net/moy2010/sgu2jft4/3/

 x <- list(c("foo", "bar", "baz"),c("bar", "foo", "baz", "foo"),c("baz", "bar", "foo", "bar", "foo"))

> x
[[1]]
[1] "foo" "bar" "baz"

[[2]]
[1] "bar" "foo" "baz" "foo"

[[3]]
[1] "baz" "bar" "foo" "bar" "foo"

编辑：

没有注意到您要覆盖来自img标签的图像。这是为此更新的jsfiddle：

https://jsfiddle.net/moy2010/sgu2jft4/8/

悬停时在img标签顶部替换或显示其他图像

2 个答案: