Question

我在使用.mouseout时遇到问题我不是专家：）

我有一组图像（带有ID＃image-1，＃image-2 ..），当悬停一组＆lt; span＆gt;使用ids＃for-image-1，＃for-image-2 ...为指定的图像赋予不透明度：

这是脚本/ WORKS FINE /的第一部分，它删除了所有图像的不透明度，并将不透明的类添加到悬停正确的＆lt;时分配的图像中。 span＆gt;

<script>
$(document).ready(function() {
  $("#secciones span").hover(function() {
    $("#golfball img").removeClass("opaque");

    var imageToShow = $(this).attr("id").replace("for-", "");
    $("#golfball #"+imageToShow).addClass("opaque");

  });
});

</script>

这是另一半，在我遇到问题的地方，我想要第一个具有id＃image-1的图像来恢复任何＆lt; span＆gt;

<script>
$(document).ready(function() {
  $("#secciones span").mouseout(function() {
    $("#image-1").addClass("opaque");

  });
});

</script>

提前致谢！

Answer 1

可能是一个愚蠢的问题，但你是否有理由将鼠标悬停在另一个鼠标中？

另外，您是否创建了多个具有相同ID的HTML元素？ ID应该在HTML中是唯一的，类标记不一定是。这可能会导致不良后果。

用于mouseover / mouseout的jQuery API页面（http://api.jquery.com/mouseover/）显示了在元素上链接这两个事件的示例：

$("div.overout").mouseover(function() {
    i += 1;
    $(this).find("span").text( "mouse over x " + i );
  }).mouseout(function(){
    $(this).find("span").text("mouse out ");
  });

如果我理解正确，那就是你想要用它来拍摄的。

Answer 2

我不确定我是否正确理解这一点，但是如果你想要获得不透明度，可能会改变鼠标输出

 $("#image-1").addClass("opaque");

到

 $("#image-1").removeClass("opaque");

Answer 3

您需要IE6支持吗？如果是的话 - 让你的Boss明白IE6糟透了，每个使用它的人都不值得成为你的客户：P（哦，如果它就这么简单......）。但是如果你不需要这个，你根本就不需要javascript，简单的CSS就可以了：

演示：http://jsfiddle.net/2GXny/

<div class="imgContainer">
  <img style="width:100px; height:100px;" src="./test.jpg" alt="some alt" />
  <span>lalalalalaa</span>
  <img style="width:100px; height:100px;" src="./test.jpg" alt="some alt" />
  <span>lalalalalaa</span>
</div>

使用相关的CSS：

.imgContainer span { display: none; }
.imgContainer img:hover + span { display:inline; }

显然需要样式来定位跨度等...在浏览器中运行良好，但IE6 - 显然......

Answer 4

您应该使用悬停功能来同时调用鼠标和鼠标。试试这个。

<script>
$(document).ready(function() {
   $("#secciones span").hover(function() {
       $("#golfball img").removeClass("opaque");

       var imageToShow = $(this).attr("id").replace("for-", "");
       $("#golfball #"+imageToShow).addClass("opaque");

   },
   function(){
       $("#image-1").addClass("opaque");
   });
});
</script>

Answer 5

jquery悬停函数通常有两个参数：hoverIn和hoverOut。而不是绑定mouseout事件，将“make opaque”函数传递给悬停绑定。

$('#secciones span').hover(
    function() {
        $("#golfball img").removeClass("opaque");

        var imageToShow = $(this).attr("id").replace("for-", "");
        $("#golfball #"+imageToShow).addClass("opaque");

    },
    function() {
        $("#image-1").addClass("opaque");           
    }
);

通过包含第二个功能，您不需要鼠标输出，因为它已经由悬停功能控制。

Answer 6

HTML

<div id='secciones'>
    <span>
        <div id='golfball'>
            <img src='http://kaczanowscy.pl/tomek/sites/default/files/test_result_green.png'><br />
            <img src='http://www.careercup.com/attributeimage?pid=microsoft-interview-questions'><br />
            <img src='http://img.brothersoft.com/games/flash/icon/m/math-test-3572-1264177735.jpg'>
        </div>
    </span>
</div>

脚本

$(function () {
    $('#golfball img').each(function () {
        $(this).css('opacity', '0.3').bind({
            mouseenter : function () {
                $(this).animate({
                    opacity : 1.0
                });
                //you may add class here
            },
            mouseleave : function () {
                $(this).animate({
                    opacity : 0.5
                });
                // you may remove class here
            }
        });
    });
});

DEMO

JQUERY - Mouseout

6 个答案: