Question

我想为淡化元素制作jQuery脚本。

但是，当我将<a class='sow'></a>元素中的一个悬停时。 jQuery影响了所有的 <a class='sow'></a>元素。例如，当我悬停第一个选定元素时，其他元素也会受到影响（淡入淡出）。

我想要的是：当我悬停所选元素时，其他元素不会受到影响。

脚本：

$(".sow").hover(
function() {
  $(".leftinf").show( "slow" );
  $(".rightinf").show( "slow" );
},
function() {
  $(".leftinf").hide( "slow" );
  $(".rightinf").hide( "slow" );
})

我该如何解决这个问题？

＃admry我的英语不好：/

其博客包含代码abov：www.howtopc.cf

Answer 1

您必须在此上下文中使用$(this)对象，

$(".sow").hover(function() {
  $(".leftinf,.rightinf", $(this).next(".informasi")).show("slow");
},function() {
  $(".leftinf,.rightinf", $(this).next(".informasi")).hide("slow");
});

.next()函数将选择下一个兄弟。
$("selector", context)将根据您选择元素选择器在提供的上下文中。

Answer 2

避免这种情况的最佳做法是，你应该基于id而不是基于类来定位元素，所以尝试通过id进行定位，这可以解决你的问题。如果你想按类定位它试试这个：

HTML：

<button id="button">
  Button
</button>
<div class="mainDiv">
 <div class="leftinf">
  Left Inf
 </div>

 <div class="rightinf">
  Right Inf
 </div>
</div>

JQuery：

$("#button").hover(function() {
   $(".mainDiv").toggle();
});

我想这会解决你的问题，请仔细阅读。工作小提琴：Fiddle Link

每个选定元素的jQuery一起运行

2 个答案: