javascript - jQuery 悬停以交换图像不起作用

Question

我在使用简单的悬停效果来更改图像时遇到问题；有谁知道我做错了什么？我知道这很简单，但我是 JS 新手。

// Category hover effects
$(".category-switch span").hover(function () {
    $(this).fadeToggle();
}, function () {
    $(this).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>

Answer 1

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

$('.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>