Question

我一直试图解决这个问题，但到目前为止，没有什么对我有用。我目前正在使用Wordpress。我在一个div中有几个元素。标题h6元素在div本身内，而background-image元素也在div中，它有一个图像，并且在悬停时图像会改变颜色（也就是改变为另一个图像相同大小等等但颜色不同）。我想要做的是，当有人悬停在标题h6元素/标题上时，它还会触发图像更改为另一个图像。我目前的代码低于......

<style>
.myButtonClient {
  display: block;
  width: 62px;
  height: 62px;
  background-size: 60px 60px;
  background: url('clients-white-e1472751653800.png') bottom;
  text-indent: -99999px;
}
.myButtonClient:hover {
  width: 62px;
  height: 62px;
  background-size: 60px 60px;
  background: url('clients-blue-e1472751683604.png') bottom;
}
.info_header {  
  text-decoration: none !important; 
  color:#396ba5;
}
.info_header:hover {color:#222222;}
.benefit_header {   
  text-decoration: none !important; 
  color:#ffffff !important;
}
.benefit_header:hover {color:#222222;}
</style>


<div style="width: 98%; float: left; clear: both;">
     <div id="one" style="width: 20%; float: left;"><a class="myButtonClient" href="#">client</a></div>
     <div style="width: 80%; float: left;">
         <h6 style="font-size: 16px; font-family: 'Century Gothic',CenturyGothic,AppleGothic,sans-serif; font-weight: bolder; text-align: left; margin-top: 2px;"><a class="info_header" href="#">Client Lookup</a></h6>
         <div style="border-bottom: 1px solid #cccccc; width: 100%; height: 10px; margin-top: -45px; margin-bottom: 20px;"></div>
         <p style="font-size: 10px; font-family: 'Century Gothic',CenturyGothic,AppleGothic,sans-serif; font-weight: bolder; text-align: left; margin-top: -20px;">Search and obtain client information. Any where from archives, contract to notes. Usu illud etiam mentitum an, at choro regione pericula sed.</p>

     </div>
 </div>

因此，当标题悬停时，标题会将颜色更改为＃222222，而另一个div中的图像将更改为次要图像。我的注意力是在一个页面上创建多个这样的列表。我尝试在div周围放置一个href，改变背景图像但是背景图像一直在混乱等等。任何帮助都表示赞赏。

HTML - 当标题被悬停时，它会在另一个Div中改变图片

0 个答案: