Question

当我将鼠标悬停在其包含的div上时，我试图交换图像。

我可以用css做，但我有6个div，其中包含6个图像。如果我在css中做到这一点，我需要6组悬停事件来改变背景图像。我希望用尽可能简单的代码来做到这一点。

此时图像未设置为背景图像，而是设置为<img src>

所有悬停图片都使用相同的名称，但在文件名中添加了'over'。

即。 shop.png shopover.png是否可以将img src文件名追加到悬停在其容器div上时添加'over'部分？

html：

<div class="row">

         <a href="index.php?page=exhibitorlist&id=1"> <div class="c2 center"><img src="images/eliquid.png"><h2 class="center">Juice Brands</h2></div></a>
           <a href="index.php?page=exhibitorlist&id=2"> <div class="c2 center"><img src="images/mod.png"><h2 class="center">Hardware</h2></div></a>              
          <a href="index.php?page=exhibitorlist&id=3"><div class="c2 center"><img src="images/dist.png"><h2 class="center">Distributors</h2></div></a>
          <a href="index.php?page=exhibitorlist&id=4"><div class="c2 center on"><img src="images/shop.png"/><h2 class="center">Retailers</h2></div></a>              
          <a href="index.php?page=exhibitorlist&id=5"><div class="c2 center"><img src="images/robot.png"><h2 class="center">Machinary / Packaging</h2></div></a>
          <a href="index.php?page=exhibitorlist&id=6"><div class="c2 center"><img src="images/other.png"><h2 class="center">Other</h2></div></a>       
</div>

css：

#exhibitorcontainer {
background-color:rgba(0, 0, 0, 0.7);
background:url(../images/bg2.png) repeat;
width:100%;
height:100%;
}
#exhibitorcontainer .c2 {
margin: 0 5px;
width: 15.8%;
background-color:rgba(0, 0, 0, 0.5);
}
#exhibitorcontainer h2 {
font-size:16px;
color: #1b9bff;
}
#exhibitorcontainer .c2:hover h2 {
color:#666;
}

此刻我将H2从蓝色切换为灰色，我想对图像做同样的事情。有关最佳方法的任何想法吗？

Answer 1

最简单的方法是使用两张图片：

<div class="c2 center">
  <img src="images/dist.png" class="normal-image">
  <img src="images/dist-over.png" class="hover-image">
  <h2 class="center">Distributors</h2>
</div>

然后使用CSS：

.hover-image, .c2:hover .normal-image {
  display: none;
}

.c2:hover .hover-image {
  display: inline;
}

Answer 2

您可以使用下面给出的javascript简单地进行更改：

html的图片代码

＆＃13;

SETLOCAL EnableDelayedExpansion

for  %%f in (*.h) do (
    SET header=%%~ff
    ECHO header=!header!
    SET source=%%~df%%~pf%%~nf.cpp
    ECHO source=!source!
)

＆＃13;

通过javascript更改图片

＆＃13;

<img src="images/click.png" onmouseover="ic()" id="myImage"/>

＆＃13;

现在当鼠标悬停在你的图像上然后javascript调用这个函数并在那里设置你的图像，如果你想要鼠标悬停不在图像上，然后图像返回上一次所以使用相同的脚本反之亦然。

将鼠标悬停在其容器div上时交换图像

2 个答案: