Question

我正在尝试将我的页脚img更改为悬停时的其他img，我已通过将每个img创建为div来完成此操作，但是，我试图避免这种情况，还有其他可能的方法吗？

当前的CSS：

.footerLeft {
  float:left;
  width: 50%;
  height: 100px;
  color: #fff;
  background-color: #33383b;
}
.footerLeft p {
  margin-left: 25px;
}
.footerLeft img {
  width: 175px;
  height: 50px;
  padding-left: 25px;
  margin-top: 10px;
}
.footerRight {
  float:right;
  width: 50%;
  height: 100px;
  color: #fff;
  background-color: #33383b;
}
.footerRight img {
  width: 35px;
  height: 35px;
}
.footerRight p {
  text-align: right;
  position:relative;
  margin-top: -20px;
  margin-right: 20px;
}

当前HTML：

<div class="footerLeft">
<img src="img/logo.png">
<p>Sharpturn Network&copy; 2016</p>
</div>
<div class="footerRight">
<ul id="menu">
  <li><a href="https://www.facebook.com/SharpturnNetwork" target="_blank"><img src="img/footer/facebook.png"></a></li>
  <li><a href="https://www.twitter.com/SharpturnNet" target="_blank"><img src="img/footer/twitter.png"></a></li>
  <li><a href="https://www.youtube.com/sharpturnnetwork" target="_blank"><img src="img/footer/youtube.png"></a></li>
</ul>
<p>Designed by Ryan Williams</p>
</div>

Answer 1

将一个img设置为背景img，另一个设置为悬停时的背景img。

footer {
  background-image: url(...);
}
footer:hover {
  background-image: url(...);
}

Answer 2

我能想到使用div（或带有背景图像的其他元素）的唯一选择是使用JavaScript。这样您就可以更改＆＃39; src＆＃39;悬停时的图像。

element.setAttribute('src', 'http://www.example.com/image.jpg');

Answer 3

正如@partians所说，只是添加了“背景大小”作为封面，我认为你需要它。

footer {
  width: 900px;
  height: 600px;
  background-image: url("http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg");
  background-size: cover
}

footer:hover {
  background-image: url("http://image2.redbull.com/rbcom/010/2013-07-25/1331603705670_2/0010/1/900/600/2/red-bull-illume.jpg");
}

<footer> </footer>

Answer 4

尝试这个。只需复制并粘贴并尝试它。只需要替换你的两个图像。

<!DOCTYPE html>
<html>
<head>
<title>hover</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
  body{
    margin:0;
    padding:0;
  }

.imageOne{
  width: 500px;
  height: 500px;
  box-shadow: 1px 2px 1px black;
  background-image: url(http://www.ron-gatepain.com/images/Golden_Gate_Bridge.JPG?306);
  background-repeat: no-repeat;
}

.imageTwo{
  width: 500px;
  height: 500px;
  box-shadow: 1px 2px 1px black;
  background-image: url(http://gym1526-english.narod.ru/images/Statue.jpg);
  background-repeat: no-repeat;
}

</style>

</head>
<body>

<div id="myimage" class="imageOne">

</div>


<script type="text/javascript">
 $(document).ready(function(){
   $("#myimage").mouseenter(function(){
    $(this).addClass("imageTwo").removeClass("imageOne");
   });

   $("#myimage").mouseleave(function(){
    $(this).addClass("imageOne").removeClass("imageTwo");
   });
 });
</script>

</body>



</html>

Answer 5

编辑 请注意，其他一些答案会在悬停整个页脚容器的任何部分时更改图像。此方法仅在悬停图像区域时更改图像。

您可以在页脚容器上声明伪元素与图像位于与悬停时替换它的图像相同的位置。基本上，使用opacity和z-index的组合，您可以隐藏原始图像并在同一位置显示伪元素。

以下是如何实现这一目标的示例：

＆＃13;

.footerLeft:before {
    /* this creates the pseudo-element */
    width: 175px; /* Same as img */
    height: 50px;  /* Same as img */
    margin-left: 25px;  /* Same as img */
    margin-top: 10px;  /* Same as img */
    background: url(http://lorempixel.com/175/50/cats); /* your replacement img */
    position: absolute;
    z-index: 0;
    content: '';
}

.footerLeft img {
    width: 175px;
    height: 50px;
    margin-left: 25px; /* I used margin-left instead of padding-left */
    margin-top: 10px;
    position: relative; /* necessary for the z-index to work */
    z-index: 1; /* puts the img above the pseudo-element by default */
}

.footerLeft img:hover {
    opacity: 0; /* hides the original image on hover */
}

＆＃13;

编辑2 ：如果您希望社交媒体图标在悬停时更改图像，则过程类似。使用CSS在每个a标记上创建伪元素，其尺寸与原始img相同。为每个图标配置不同的替换图像：

＆＃13;

.footerRight img {
  width: 35px;
  height: 35px;
  position: relative; /* enables the use of z-index */
  z-index: 1; /* puts the image on top by default */
  transition: opacity .2s; /* remove this for no smooth transtion */
}


.footerRight a:before {
  width: 35px; /* same a img */
  height: 35px; /* same a img */
  z-index: 0;
  content: '';
  position: absolute;
}

.footerRight li:nth-child(1) a:before {
  /* facebook icon */
  background: url(http://lorempixel.com/35/35/cats);
}

.footerRight li:nth-child(2) a:before {
    /* twitter icon */
  background: url(http://lorempixel.com/35/36/cats);
}

.footerRight li:nth-child(3) a:before {
  /* youtube icon */
  background: url(http://lorempixel.com/36/35/cats);
}

.footerRight img:hover {
  opacity: 0; /* hides the original image */
}

＆＃13;

注意：此方法的优点是可以立即加载替换图像。对于其他方法，情况可能并非如此。

您可以在此处查看工作示例：http://codepen.io/wilman/pen/mVZVzg

在不使用额外div的情况下在悬停时更改图像

5 个答案: