Question

我让鼠标悬停动画，当我将鼠标移到链接上时它会显示图像，当我将鼠标移动到另一个链接时，前一个图像必须消失并显示属于另一个链接的另一个图像。

        <style>
         .imgHover {
         display: inline;
         position: relative;
         }
       .hover {
       display: none;
        position: absolute;

        z-index: 2;
        }
      </style>



 <script type="text/javascript">
  $(function() {
     $(".imgHover").hover(
    function() {
        $(this).children("img").fadeTo(200, 0.85).end().children(".hover").fadeIn(100);
    },
    function() {
        $(this).children("img").fadeTo(200, 1).end().children(".hover").fadeOut(100)();
    });
    });</script>


   <a class="imgHover" href="htpp://google.com">Text Link 1
   <img class="hover" src="image_link1.jpg" alt=""></a>


   <a class="imgHover" href="htpp://google.com">Text Link 2
   <img class="hover" src="image_link2.jpg" alt=""></a>

/////////////////////////////////// 我可以移动代码链接吗？当我鼠标悬停Text Link 1时，脚本选择图像1 ...请帮忙。

   <div id="imageshow">
  <img class="hover" src="image_link1.jpg" alt="">
 <img class="hover" src="image_link2.jpg" alt="">
  </div>


     <div id="link">
    <a class="imgHover" href="htpp://google.com">Text Link 1   </a>
    <a class="imgHover" href="htpp://google.com">Text Link 2   </a>

   </div>

Answer 1

 <script type="text/javascript">
  $(function() {
     $(".imgHover").hover(
    function() {
        $(".imgHover img, .imgHover img .hover").stop();
        $(this).children("img").fadeTo(200, 0.85).end().children(".hover").fadeIn(100);
    },
    function() {
        $(".imgHover img, .imgHover img .hover").stop();
        $(this).children("img").fadeTo(200, 1).end().children(".hover").fadeOut(100)();
    });
 });
</script>

Answer 2

你必须把它放在第一个淡入淡出之前：

$(".imgHover").hover(
function() {
    $(this).children("img").stop().fadeTo(200, 0.85).end().children(".hover").fadeIn(100);
},
function() {
    $(this).children("img").stop().fadeTo(200, 1).end().children(".hover").fadeOut(100)();
});

我可以把.stop（）放在这个animite中

2 个答案: