Question

我有3个不同的信息检查类，每个不同的范围应该显示不同的图像。当我悬停信息检查时，应显示图像而不是原始图像＆＃34; autoselect-pic＆＃34;。当鼠标移出时，图像应该变回原来的＆＃34; autoselect-pic＆＃34;。我尝试使用jquery，但我找不到正确的方法来做到这一点。这是我的HTML和CSS：

＆＃13;

div.info-check { 
  position: absolute; 
  right: 50px; 
  top: 2px; 
  background-size: 100%; 
  width: 15px; 
  height: 15px; }

span.breedte-tooltip, span.hoogte-tooltip, span.inch-tooltip {
  background-size: 100%;
  background-repeat: no-repeat;
  visibility: hidden;
  width: 230px;
  height: 70px;
  z-index: 20; 
  opacity: 0;
  transition: all 0.4s ease; }

span.breedte-tooltip { background-image: url('/images/icons/breedte-bepalen.png');}
span.hoogte-tooltip { background-image: url('/images/icons/hoogte-bepalen.png'); }
span.inch-tooltip { background-image: url('/images/icons/inchmaat-bepalen.png'); }

＆＃13;

<div class="autoselect">
  <img class="autoselect-pic" src="/images/products/inchmaat-bepalen.png" alt="inchmaat-bepalen">
  <div class="autorow">
    <div class="breedte">
      <label for="Breedte">Breedte</label>
      <div class="info-check"><span class="breedte-tooltip"></span></div>
      <select name="Breedte" id="filter-width">
        <option>Selecteer</option>
      </select>
    </div>
    <div class="lengte">
      <label for="Hoogte">Hoogte</label>
      <div class="info-check"><span class="hoogte-tooltip"></span></div>
      <select name="lengte" id="filter-height">
        <option>Selecteer</option>
      </select>
    </div>
    <div class="inch">
      <label for="Inch">Inchmaat</label>
      <div class="info-check"><span class="inch-tooltip"></span></div>
      <select name="inch" id="filter-inch">
        <option>Selecteer</option>
      </select>
    </div>
  </div>
</div>

＆＃13;

Answer 1

您可以在所需的元素上使用jquery的悬停功能。这就是：

$( selector ).hover( handlerIn, handlerOut )

在选择器中放置信息检查，然后在处理程序内部，您要求它根据需要更改图像。也许使用属性来更改源或更改元素的类（我认为更好）。

有关hover的更多信息。

试图在悬停时交换3张图片

1 个答案: