jQuery悬停交换图像不起作用

Question

我有一个简单的悬停效果来改变图像的问题;有没有人有任何想法我做错了什么？我知道这很简单，但我是JS的新手。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

从选择器中删除“a”，或在每个“li”元素中用“a”标记包装span的第一个实例。

解决方案1：

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

解决方案2：

<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>

Answer 2

我添加了一些类并稍微更改了javascript。我没有得到你想要达到的效果，但来自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>可能是更好的选择。试试下面的内容。

＆＃13;

＆＃13;

{{1}}

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 3

您想要从选择器中删除span并将其设为锚点。然后你会发现其中的跨度来进行切换。它仍然需要调整以使其平稳过渡，但回答了这个问题。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

使用纯CSS也可以实现这一点。

＆＃13;

＆＃13;

@-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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;