JQUERY - 鼠标悬停

Question

我在使用 .mouseout 时遇到问题，我不是专家 :)

我有一组图像（ID 为 #image-1、#image-2..），当悬停一组 ID 为 #for-image-1、#for-image-2 的 时。 . 为分配的图像赋予不透明度：

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

<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 的图像能够从任何

中恢复鼠标上的不透明度

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

  });
});

</script>

提前致谢！

Answer 1

不确定我是否正确理解这一点，但如果您想恢复不透明度，可能会在 mouseout 时更改

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

到

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

Answer 2

您需要 IE6 支持吗？如果是 - 让你的老板明白 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 3

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

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

jquery hover 函数通常有两个参数：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");           
    }
);

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

Answer 5

这可能是一个愚蠢的问题，但是您是否有理由在一个中使用悬停而在另一个中使用鼠标悬停？

另外，您是否创建了多个具有相同 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 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

---