0

我所拥有的是一个图像和内容列表，它们包含在名为 views-row-1、views-row-2、views-row-3 等的 div 标签中

  • div1 .views-field-field-inthepress-icon-fid .field-content

  • div2 .views-field-markup .field-content

一旦 div1 悬停，然后我使用 jquery 使 div2 可见（在 css 中设置为 none），使用 css div2 位于 div1 之上，然后我隐藏 div1

我隐藏了内容并使用 JQuery 显示它，问题是当我悬停时，所有列表的所有内容都会显示！

<script type="text/javascript">
$(document).ready(function() {
    $(".views-field-field-inthepress-icon-fid .field-content").hover( function() {
        $(".views-field-markup .field-content").css('display','block');
    }, function() {
        $(".views-field-markup .field-content").hide();
    });

    $(".views-field-markup .field-content").hover( function() {
        $(".views-field-markup .field-content").css('display','block');
    }, function() {
        $(".views-field-markup .field-content").hide();
    });
});
</script>



<div class="views-row views-row-1 views-row-odd views-row-first">

<div class="views-field-field-inthepress-icon-fid">
<span class="field-content"><img src="Untitled-2.jpg" /></span>
</div>

<div class="views-field-markup">
    <span class="field-content">
    <div class="inthepress-bold"><span class="date-display-single">21/01/2011</span> BBC News Article UN</div>
    <div id="inthepress-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis blandit iaculis.</p></div>
</span> 
</div>
</div>

<div class="views-row views-row-2 views-row-odd views-row-first">

<div class="views-field-field-inthepress-icon-fid">
<span class="field-content"><img src="Untitled-2.jpg" /></span>
</div>

<div class="views-field-markup">
    <span class="field-content">
    <div class="inthepress-bold"><span class="date-display-single">21/01/2011</span> BBC News Article UN</div>
    <div id="inthepress-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis blandit iaculis.</p></div>
</span> 
</div>
</div>

<div class="views-row views-row-3 views-row-odd views-row-first">

<div class="views-field-field-inthepress-icon-fid">
<span class="field-content"><img src="Untitled-2.jpg" /></span>
</div>

<div class="views-field-markup">
    <span class="field-content">
    <div class="inthepress-bold"><span class="date-display-single">21/01/2011</span> BBC News Article UN</div>
    <div id="inthepress-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis blandit iaculis.</p></div>
</span> 
</div>
</div>
4

2 回答 2

0 
<script type="text/javascript">
$(document).ready(function() {
    $(".views-field-field-inthepress-icon-fid .field-content").hover( function() {
        $(this).css('display','block');
    }, function() {
        $(".views-field-markup .field-content").hide();
    });

    $(".views-field-markup .field-content").hover( function() {
        $(this).css('display','block');
    }, function() {
        $(".views-field-markup .field-content").hide();
    });
});
</script>

只需将目标更改为 $(this)。当您使用 $(".views-field-markup .field-content") 时，它会选择具有这些类的所有元素。使用 $(".views-field-markup .field-content") 隐藏元素很好。因为当鼠标不在时，您不想在这些类中显示任何元素。

于 2011-07-28T17:45:11.037 回答
0 
$(".views-field-field-inthepress-icon-fid .field-content").hover( function() {
    $(this).parent().next().css('display','block');
}, function() {
    $(this).parent().next().hide();
});

这将获取悬停元素的父元素，然后找到下一个兄弟元素。如果您的 HTML 将始终遵循您问题中的结构，那么这应该可以正常工作。

请注意，您可以使用.show()而不是设置 CSSdisplay属性。

于 2011-07-28T17:37:54.873 回答