0

私が持っているのは、views-row-1、views-row-2、views-row-3 ect と呼ばれる 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 
$(".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 に答える
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 に答える