Question

您能告诉我第一个跨度悬停如何显示img号1，其他跨度悬停如何显示图片2并隐藏第一个？我的代码如下：

<div class="overlays">
        <a href="#" class="overlays-a clearfix">
            <img class="overlays-img" src="./pic/1.jpg">
            <img class="overlays-img hidden" src="./pic/2.jpg">
            <img class="overlays-img hidden" src="./pic/3.jpg">
            <img class="overlays-img hidden" src="./pic/4.jpg">
            <img class="overlays-img hidden" src="./pic/5.jpg">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span class="last-span">5</span>
        </a>
    </div>

In this image u can see how that looks :/

Answer 1

我不是拒绝投票的人，如果没有理由将其作为此类活动的补充说明，我将永远不会拒绝投票。

如果将类overlays-img1和overlays-img2以CSS样式设置为display: none;，则可以使用jquery .hover()方法执行类似的操作，

<div class="overlays">
    <a href="#" class="overlays-a clearfix">
        <img class="overlays-img1" src="./pic/1.jpg">
        <img class="overlays-img2" src="./pic/2.jpg">
        <span class="span1">1</span>
        <span class="span2">2</span>
        <span class="last-span">3</span>
    </a>
  </div>

.hover()方法的实现

       jQuery(document).ready(function($){
       $(".span1").hover(function(){
       $(".overlays-img1").css("display", "block");
         });

       $(".span2").hover(function(){
       $(".overlays-img1").css("display", "none");
       $(".overlays-img2").css("display", "block");
        });
        });

或

jQuery(document).ready(function($){
 $(".span1").hover(function(){
$(".overlays-img1").fadeIn;
 });

 $(".span2").hover(function(){
  $(".overlays-img1").fadeOut;
  $(".overlays-img2").fadeIn;
  });
   });

或

 jQuery(document).ready(function($){
 $(".span1").hover(function(){
$(".overlays-img1").show;
 });

 $(".span2").hover(function(){
$(".overlays-img1").hide;
$(".overlays-img2").show;
 });
 });

我正在使用手机。让我知道我的摘要是否由于拼写错误而发生故障。

如何隐藏其他img并显示正确？

1 个答案: