CSS懸停效果改變文本樣式別處

我想能夠鏈接和一組文字懸停在淡出這個動作

HTML

<nav class="PageNav"> 
<ul> 
    <li id="HomeLink"><a href="http://www.example.com">Home</a></li> 
    <li id="OverviewLink"><a href="http://www.example.com/overview">Overview</a></li> 
    <li id="ServicesLink"> 
     <a href="http://www.example.com/services">Mega Services</a> 

     <ul class="PageSubNav"> 
      <li><a href="http://www.example.com/services/subpage">Subpage 1</a></li> 
      <li><a href="http://www.example.com/services/subpage">Subpage 2</a></li> 
      <li><a href="http://www.example.com/services/subpage">Subpage 3</a></li> 
      <li><a href="http://www.example.com/services/subpage">Subpage 4</a></li> 
      <li><a href="http://www.example.com/services/subpage">Subpage 5</a></li> 
      <li><a href="http://www.example.com/services/subpage">Subpage 6</a></li> 
     </ul> 

    </li> 
    <li id="GalleryLink"><a href="http://www.example.com/gallery">Gallery</a></li> 
    <li id="VideoLink"><a href="http://www.example.com/video">Video</a></li> 
    <li id="ContactLink"><a href="http://www.example.com/contact">Contact</a></li> 
</ul> 
</nav> 

    <article class="ContentText"> 
     <p>text</p> 
     <p>dummy text</p> 
     <p>Dummy text, dummy text, dummy text, dummy text, <strong>3 Paragraphs, Roughly 209 Words</strong></p> 
    </article>

CSS

#ServicesLink:hover .ContentText p { 
    color: rgba(255,255,255,0.5); 
}

我在想這個問題時遇到了麻煩，這裏是我的，但無濟於事。

這個想法是，當人們將鼠標懸停在「大型服務」選項卡上時，文章部分中包含的文本就會消失。

來源

2014-07-09 user3012749

試過CSS樣式'不透明度？ –

對不起，我應該提到它不是CSS風格本身我認爲它的「#ServicesLink：懸停.ContentText p {}」部分是錯誤的...當我使用樣式'.ContentText p {color：rgba（ 255,255,255,0.5）;}'它按預期工作。現在我只需要在標籤懸停時生效 – user3012749

我不認爲你可以用CSS來做到這一點。你需要一些JavaScript。 –

你目前無法用CSS做到這一點。

您必須使用JavaScript。

來源

2014-07-09 15:40:46

你的CSS正在做什麼，其目標是.ContentText p裏面#ServicesLink - 這不存在。您的.ContentText不在CSS範圍內。在香草CSS中沒有辦法將目標選擇器定位到其父代之外。

JavaScript是您的頁面上範圍元素唯一有價值的解決方案。

這是什麼目的或目的，所以我們可以給你一個更好的答案？

更新：更新時通知我。

在JS，你可以做到以下幾點：

var hoverEl = $('#ServicesLink'); 
var targetEl = $('.ContentText p'); 

hoverEl.on('mouseenter', function() { 
    targetEl.css({'color': 'rgba(255, 255, 255, 0.5)'}); 
}); 

hoverEl.on('mouseleave', function() { 
    targetEl.css({'color': 'rgba(255, 255, 255, 1)'}); 
});

DEMO

來源

2014-07-09 15:42:27

可以通過聲明opacity:0巨型服務（我想ID ServicesLink）做到這一點。或者，如果你希望它更平滑，你可以使用jQuery：

$("#id_where_you_hover").hover(function(event){ 
    $("#id_that_you_want_to_fade_out").fadeOut(1000, function() { 
      $(this).html("here you put something to replace if you want").fadeIn(2000); 
     }); 

});

來源

2014-07-09 15:42:51

CSS懸停效果改變文本樣式別處

回答

相關問題