Question

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

div1 .views-field-field-inthepress-icon-fid .field-content
div2 .views-field-markup .field-content

一旦div1悬停，然后我使用jquery（在css中设置为none）使div2可见，使用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>

Answer 1

$(".views-field-field-inthepress-icon-fid .field-content").hover( function() {
    $(this).parent().next().css('display','block');
}, function() {
    $(this).parent().next().hide();
});

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

请注意，您可以使用.show()代替设置CSS display属性。

Answer 2

<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”）隐藏元素是件好事。因为当鼠标离开时你不想显示那些类的任何元素。

JQuery确实悬停显示所有元素，需要帮助与父引用或$ this

2 个答案: