JQUERY - Mouseout

Question

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

我有一组图像(I为#image-1，#image-2..)当悬停一组ids为#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

这可能是一个愚蠢的问题，但有没有一个原因，你在一个中使用鼠标悬停而在另一个中使用鼠标移出？

另外，您是否创建了多个具有相同ID的HTML元素？ID在HTML中应该是唯一的，类标签不必是唯一的。这可能会造成不希望看到的结果。

mouseover/mouseout的jQuery应用编程接口页面(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支持吗？如果是-让你的老板明白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 -显然...