JQUERY，CSS，當在LI上模糊顯示SPAN標籤時？

考慮以下幾點：JQUERY，CSS，當在LI上模糊顯示SPAN標籤時？

ul li .main .meta {opacity:0;} 

<ul> 
<li> <span class="main">TITLE</span> <span class="meta">meta</span> </li> 
<li> <span class="main">TITLE 2 </span> <span class="meta">meta</span> </li> 
<li> <span class="main">TITLE 3</span> <span class="meta">meta</span> </li> 
etc... long list... 
</ul>

我可以做什麼樣的jQuery的魔力因此只要用戶將鼠標放在任何地方LI，與CLASS = META的SPAN，改變不透明度：1，而當用戶將他們的鼠標移開LI，即LI的元數據返回到Opacity：0，並且新的LI的元數據進入Opacity 1等。...

謝謝！

來源

2010-01-08 AnApprentice

有幾個問題在這裏。最簡單的實施方式是：

$("li").hover(function() { 
    $(this).find("span.meta").stop().fadeIn(); 
}, function() { 
    $(this).find("span.meta").stop().fadeOut(); 
});

這將工作。問題是跨度是內聯元素，並且fadeIn()會將其更改爲塊級元素。

注：將stop()在那裏是一個很好的習慣進入，否則你可以得到意想不到的效果，如果你很快火了同一目標上幾個動畫。

你可以用類就此別過：

$("li").hover(function() { 
    $(this).find("span.meta").removeClass("hidden"); 
}, function() { 
    $(this).find("span.meta").addClass("hidden"); 
});

有：

span.hidden { display: none; }

，但你失去在淡入和淡出效果這樣。但它確實解決了display: block問題。

你可以選擇animate()opacity但是opacity在IE上並不支持。見opacity：

IE兼容性注意

如果你想的不透明度在所有IE版本工作，順序應該是：
.opaque { 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first! 
    filter: alpha(opacity=50);     // second! 
} 
如果不使用這個命令， IE8-as-IE7不適用不透明度，雖然IE8和純IE7做的。

該代碼看起來是這樣的：

$("li").hover(function() { 
    $(this).find("span.meta").stop().animate({opacity: 0.0}); 
}, function() { 
    $(this).find("span.meta").stop().animate({opacity: 1.0}); 
});

一個問題，你必須回答是：做你想要的「元」的內容不會被渲染或只是不可見？有一個區別。不被渲染就像display: none。不可見就像opacity: 0這可能會混淆用戶，因爲文本仍然可以選擇。

恕我直言，我認爲你最好接受顯示器的塊性質或使用工具提示（即使是豐富的工具提示）。

來源

2010-01-08 03:53:05 cletus

$('ul li.main').mouseover(function(evt){ $(this).find('span.meta').show(); });

我想......

來源

2010-01-08 03:50:29

這不會在mouseout上隱藏。 – SLaks 2010-01-08 03:55:32

同意。正如其他答案所示，處理鼠標懸停事件非常容易。 – 2010-01-08 04:06:44

像這樣：

$('li').hover(
    function() { $('span.meta', this).show(); }, 
    function() { $('span.meta', this).hide(); } 
});

順便說，隱藏在CSS中的元素的正確方法是請使用visibility: hidden（如果你想讓它佔據的空間）或display:none（如果你不想它佔據空間）

來源

2010-01-08 03:54:13 SLaks

缺少功能之間的逗號。 – Martin 2010-01-08 03:55:27

固定;謝謝。 – SLaks 2010-01-08 04:01:04

最簡單的實現是純粹的CSS;

ul li .meta {opacity:0;} 
ul li:hover .meta {opacity:1;}

它不會做任何淡入/淡出效果，但它實現了您的目標。使用顯示或可視性，取決於您是否希望文本在不可見時影響頁面佈局，可能希望從瀏覽器支持角度看不透明。

來源

2010-01-08 05:07:44 anonymous

CSS轉換至少可以用於WebKit上的動畫效果 – roryf 2010-01-08 09:28:26

JQUERY，CSS，當在LI上模糊顯示SPAN標籤時？

回答

相關問題