Question

我有一个简单的div布局html，有一个函数，当鼠标悬停在带有className“personal-icon-email”的div上时，我将调用一个JS函数并使用className显示隐藏的div“img-info-mask ”。

<div class="user-panel">
<div class="user-panel-avatar"><img src="http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=80"/></div>
<div class="user-panel-username">Frank</div>
<div class="user-panel-info">Hi there, May name is Frank ....</div> 
<div class="personal-icon-email pie-adj" onmouseover="showTips(this);" id="123321"></div>
<div class="personal-icon-hi pihi-adj"></div>
<div class="personal-icon-fav pifav-adj"></div>
<div class="img-info-mask">Contact Frank Now</div>

我正在使用jQuery，我尝试过：

function showTips(object){$(object).next('.img-info-masks').show(); }

但失败了。我也试过

function showTips(object){$('#123321').next('.img-info-masks').show();}

仍然无效。

谁能告诉我什么是错的，我应该怎么做？谢谢你们：D

Answer 1

您还可以使用nextAll()代替next()，而不是找到img-info-mask

想要显示所有div.img-info-mask而不是尝试

$(object).nextAll('div.img-info-mask').show();

或希望首先div包含.img-info-mask

$(object).nextAll('div.img-info-mask:first').show();

Answer 2

$("div.personal-icon-email").mouseover(function(){
     $("div.img-info-mask").show();
});

您需要为鼠标悬停事件选择要监视的项目，然后为鼠标悬停添加事件处理程序。在该函数中，您将显示隐藏的div。您也可以显示它，然后在鼠标离开时使用hover（）事件处理程序隐藏它，如下所示：

$("div.personal-icon-email").hover(function(){
    //mouseover event
    $("div.img-info-mask").show();
},
function(){
    //mouseout event
    $("div.img-info-mask").hide();
});

或者你可以让它变得更简单：

$("div.personal-icon-email").hover(function(){
    //mouseover and mouseout event
    $("div.img-info-mask").toggle();
});

这为鼠标悬停和鼠标输出都调用了一个功能，每次都会切换可见性。

所以现在你想为下一次出现的隐藏信息做这个吗？好的，也可以这样做。

$("div.personal-icon-email").hover(function(){
    //mouseover and mouseout event
    $(this).parent().find('div.img-info-mask').toggle();
});

这将使用.img-info-mask类定位下一个sibiling div。您要确保每组div都像您提供的样本位于父div中，或者您将立即切换所有隐藏的div。

Answer 3

next()只检索下一个兄弟姐妹，它实际上并不遍历所有兄弟姐妹。

http://api.jquery.com/next/

Get the immediately following sibling of each element in the set of 
matched elements. If a selector is provided, it retrieves the next 
sibling only if it matches that selector.

首先，如果你将这些div包装在父div中，你可以做

$(this).parent().find('.img-info-mask').show()

Answer 4

你的意思是：


$(".personal-icon-email").hover(function() {
  $(".img-info-mask").show();
},
function() {
  $(".img-info-mask").hide();
});

Answer 5

jquery next：获取匹配元素集中每个元素的兄弟之后的IMMEDIATELY。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。

.img-info-masks不会紧跟在所选元素之后。

jQuery选择下一个<div>元素</div>

5 个答案: