实现切换悬停CSS

Question

如果可能的话，我需要一些帮助。我想在这两张卡中实现图像悬停开关。

我想让它像这样(代码也在链接中提供)

https://www.tutorialrepublic.com/codelab.php?topic=faq&file=changing-image-on-hover-with-css

谢谢你们，非常感谢！

Answer 1

我不推荐使用background-image，因为这会为整个元素/页面设置一个背景--我使用的是content属性，但是您可以很容易地将其切换出来。另外，你给出的两张图片是托管在一个没有SSL证书的网站上，所以我把同样的图片上传到了imgur上。

代码如下。确保在CSS中设置宽度和高度尺寸以满足您的需要(例如，您可能希望图像更小)。

​

.fan {
  content:url("https://i.imgur.com/XJDGjDI.jpg");
}

.fan:hover {
  content:url("https://i.imgur.com/FTmXIIf.jpg");
}

<body>
  <img class="fan"></div>
</body> 

​

如果您愿意，您也可以使用一个小JavaScript来做同样的事情，您可以将它放在HTML的<script>标记中，或者放在它自己的文档中。请参见：

​

function back() {
  document.getElementById('fan').src = "https://i.imgur.com/FTmXIIf.jpg"
}

function front() {
  document.getElementById('fan').src = "https://i.imgur.com/XJDGjDI.jpg"
}

<img onmouseover="back()" onmouseout="front()" src="https://i.imgur.com/XJDGjDI.jpg" id="fan">

​

Answer 2

您需要删除html中的图像标记，并添加一个带有标识符id="someid"的DIV标记，您可以在CSS中使用它来设置properties，然后添加css来设置图像的background。然后为hover状态:hover设置css属性，并将背景url()更改为您希望在悬停时显示的所需图像。

​

#rebel2 {
   background: url('http://motopara.com/img/Rebel2_SS_Logo.jpg') no-repeat;
   width: 685px;
   height: 865px;
}

#rebel2:hover {
background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTm_KZm-pk_XMbnu2-5L5pVDoxNG8Fax1k4PWE7F1Tie8IMQdpe&usqp=CAU') no-repeat;
    width: 685px;
   height: 865px;
}

<div style="overflow:auto;"> 
<div class="column">
<!-- CARD BEGIN-->
<div class="card">
<div class="column-margin">
<font color="#000000"><p>REBEL 2 RS</p></font>
  <hr/>
    <div id="rebel2"></div><!-- Removed the image tag and added a div that the css background can have a url added to it-->
  <hr/>
  <div class="center">
    <div class="skewed-heading-bg">
      <div class="skewed-heading-content"> <a href="rebel2.php" style="color:#FFFFFF;"><span style="font-size:12px;">DETAILS</span><i class="fa fa-angle-double-right" style="font-size: 16px; padding-left: 5px;"></i></a> </div>
    </div>
  </div>
 </div>
</div></div>
<!-- CARD END-->
<div class="column">
<!-- CARD BEGIN-->
<div class="card">
<div class="column-margin">
  <font color="#000000"><p>ALPHA</p></font>
  <hr/>
  <img src="http://motopara.com/img/sim_n_rob.jpg" alt="EVO Alpha PPG Frame" style="width:95%">
  <hr/> 
  <div class="center">
    <div class="skewed-heading-bg">
      <div class="skewed-heading-content"><a href="alpha.php" style="color:#FFFFFF;"> <span style="font-size:12px;">DETAILS</span><i class="fa fa-angle-double-right" style="font-size: 16px; padding-left: 5px;"></i> </a></div>
    </div>
  </div>

​