JQuery做懸停顯示所有元素，需要家長參考幫助或$這

我有什麼是圖像和內容列表，他們被包裹在div標籤稱爲views-row-1，views-row-2，views-row -3 ECT

DIV1 .views場場-inthepress圖標裂點域內容
DIV2 .views場的標記點域內容

一旦div1被徘徊，那麼我使div2可見usi ng jquery（在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>

來源

2011-07-28 Knigh7

$(".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屬性。

來源

2011-07-28 17:37:54

不運氣，它現在工作！ – Knigh7

看我的編輯。請注意，只有您的HTML始終遵循示例中的結構，才能使用此功能。如果沒有，讓我知道，我會修改它。 –

我想顯示隱藏的元素，所以當我鼠標，讓我在div出現在DIV然後我徘徊隱藏懸停DIV .views場的標記點域內容{ \t顏色的頂部： #FFFFFF; \t font-size：.85em; \t background-color：＃1B8F9E; \t位置：相對; \t width：105px; \t top：-169px; \t left：0px; height：155px; \t padding：10px; \t display：none; } – Knigh7

<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-28 17:45:11 Mohsen

沒有運氣，它沒有做任何記憶.views-field-markup .field-content是另一個div，鼠標懸停在我想放在DIV頂部我懸停 – Knigh7

因此爲它們設置ID或使用$ （「.views-field-markup .field-content」）[0]爲第一等... – Mohsen

JQuery做懸停顯示所有元素，需要家長參考幫助或$這

回答

相關問題