jQuery悬停交换图像不工作

您将需要从选择器中删除span并使其仅为锚。然后在其中找到跨度来进行切换。它仍然需要调整以使其平滑过渡，但回答了这个问题。

$('.category-switch').hover(
  function() {
    $(this).find('span').fadeToggle();
  }, function () {
    $(this).find('span').fadeToggle();
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>
        <a href="#" class="category-switch">
            <span><img src="">image 1</span>
            <span style="display:none;"><img src="">image 1 - hover</span>
        </a>
    </li>
    <li>
        <a href="#" class="category-switch">
            <span><img src="">imag 2</span>
            <span style="display:none;"><img src="">image 2 - hover</span>
        </a>
    </li>
    <li>
        <a href="#" class="category-switch">
            <span><img src="">image 3</span>
            <span style="display:none;"><img src="">image 3 - hover</span>
        </a>
    </li> 
</ul>

使用纯CSS也可以实现。

@-webkit-keyframes fadeIn {
  00% {opacity: 0; display:block;}  
  100% {opacity: 1;}
}
@keyframes fadeIn {
  0% {opacity: 0; display:block;}  
  100% {opacity: 1;}  
}
@-webkit-keyframes fadeOut {
  0% {opacity: 1; display:block;}
  100% {opacity: 0; display:none;}  
}
@keyframes fadeOut {
  0% {opacity: 1; display:block;}
  100% {opacity: 0; display:none;}    
}
li .category-switch {
  display:inline-block;
  min-width:50px;
  min-height:50px;
}
li .category-switch span {
  opacity: 1;
  display: block;
  -webkit-animation: fadeOut 0.5s ease-in; /* Chrome, Safari, Opera */ 
  animation: fadeOut 0.5s ease-in;
}
li .category-switch span.hidden {
  opacity: 0;
  display: none;
  -webkit-animation: fadeIn 0.5s ease-in; /* Chrome, Safari, Opera */ 
  animation: fadeIn 0.5s ease-in;
}
li:hover .category-switch span.hidden {
  opacity: 1;
  display: block;
}
li:hover .category-switch span:not(.hidden) {
  opacity: 0;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="#" class="category-switch">
      <span><img src="">image 1</span>
      <span class="hidden"><img src="">image 1 - hover</span>
    </a>
  </li>
  <li>
    <a href="#" class="category-switch">
      <span><img src="">imag 2</span>
      <span class="hidden"><img src="">image 2 - hover</span>
    </a>
  </li>
  <li>
    <a href="#" class="category-switch">
      <span><img src="">image 3</span>
      <span class="hidden"><img src="">image 3 - hover</span>
    </a>
  </li>
</ul>

要么从选择器中删除"a"，要么在每个"li"元素中使用"a"标签包装span的第一个实例。

解决方案1:

$(".category-switch span").hover(function () { $(this).fadeToggle(); }, function () { $(this).fadeToggle(); });

方案二:

<ul>
    <li>
        <a href="#"><span><img src="">image 1</span></a>
        <span style="display:none;"><img src="">image 1 - hover</span>
    </li>
    <li>
    <a href="#"><span><img src="">imag 2</span></a>
    <span style="display:none;"><img src="">image 2 - hover</span>
    </li>
    <li>
        <a href="#"><span><img src="">image 3</span></a>
        <span style="display:none;"><img src="">image 3 - hover</span>
    </li> 
</ul>

我添加了一些类并稍微改变了javascript。我没有得到你想要的效果，但fadeIn和fadeOut从jquery可能是更好的选择。下面试试。

// Category hover effects
$(".category-switch span.hoverable").mouseover(function () {
    $(this).fadeOut();
    $(this).next('span').fadeIn();
});
   $(".category-switch").mouseleave(function () {
    $(this).find('span.hoverable').fadeIn();
    $(this).find('span.hoverable').next('span').fadeOut();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="category-switch">
        <span class='hoverable'><img src="">image 1</span>
        <span style="display:none;"><img src="">image 1 - hover</span>
    </li>
    <li class="category-switch">
        <span class='hoverable'><img src="">image 2</span>
        <span style="display:none;"><img src="">image 2 - hover</span>
    </li>
    <li class="category-switch">
        <span class='hoverable'><img src="">image 3</span>
        <span style="display:none;"><img src="">image 3 - hover</span>
    </li> 
</ul>