上的鏈接我想改變股利和鏈接

的背景色在鼠標懸停時我有一個div上的鏈接我想改變股利和鏈接

<div id="box"> 
content content 
content content <a href="#">content</a>content 
</div>

在鼠標移動到鏈接上我想改變鏈接的顏色，也是背景顏色的div。只使用CSS，是否可能只使用CSS？請幫幫我。

來源

2012-06-19 Prashobh

沒有爲目標parent元件沒有CSS選擇。但是可以用一些技巧來達到慾望的效果。像這樣寫：

#box a:hover:after{ 
    content:''; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    background:red; 
    z-index:-1; 
}

入住這http://jsfiddle.net/V4qDm/3/

來源

2012-06-19 07:45:13 sandeep

您可以更改使用

a:hover{color:#ccc;}

的鏈接的顏色，但你不能使用CSS3或CSS孩子訪問的父元素2.

它在$ CSS4已經提供註冊

$div>a:hover{background:#ccc;}

，但目前還沒有瀏覽器支持它

你必須尋找到javascri點改變父母的背景。

來源

2012-06-19 06:51:19

感謝，BT我不想使用JS做。 – Prashobh

這裏是工作提琴：

http://jsfiddle.net/V4qDm/2/

添加這個CSS

#box.hover{background:#cb2326;} 
#box a{display:inline-block;} 
#box a:hover{color:#fff;}

添加這個jQuery：

$('a').hover(function(){ 
    $(this).parent().toggleClass('hover'); 
});

來源

2012-06-19 06:56:03 SVS

這只是解決方案的一部分：「..也是div的背景顏色」因此，-1 – stUrb

現在檢查工作小提琴它肯定會解決您的問題。只有css纔是解決方案，只能用css4。所以如果你真的想要得到這個效果，那麼使用Jquery是很好的。 – SVS

你應該考慮使用JavaScript，它就是這麼簡單的任務，簡單！

添加下面的標題：

<script type="text/javascript"> 
    function changeDivAndLink(linkid, divid){ 
     document.getElementById(linkid).setColor(...); 
     document.getElementById(divid).setBackground(...); 
    } 
</script>

然後，所有你需要做的，你的代碼中添加的onmouseover：

<div id="box"> 
    content content 
    content content <a href="#">content</a>content 
</div>

我知道你其實想做到這一點，而不使用腳本，但JavaScript如今廣泛支持，不支持它的瀏覽器的百分比可以忽略不計。

希望這對一些人有所幫助。

來源

2012-06-19 06:56:50 EvenLisle

您可以在DIV使用:hover，它在所有的瀏覽器支持除了IE6，今天已經很少*用戶：

div#box:hover { 
background-color: #whatever; 
}

編輯：當然，我完全誤解了這個問題。道歉！正如其他人指出的那樣，子元素不可能改變其父在CSS中的外觀（至少在CSS4之前）。如果它是可以接受的父母作爲觸發那麼上面的作品，你當然可以改變鏈接的外觀的同時：

div#box:hover a { 
color: #somecolour; 
}

*）0。66％根據statcounter.com

來源

2012-06-19 06:56:52

儘管我絕不提倡阻止* any *瀏覽器的用戶訪問您的網站的方法，但缺少：懸停效果將（應該）不會對可用性產生任何重大影響。 –

-1，他想改變'＃box'顏色的div懸停在鏈接上本身不是 – 2012-06-19 07:20:15

哦。我的錯。我想在回覆之前我需要花更多的時間來閱讀這些問題。 –

要使整個div充當鏈接，請將錨標記設置爲：display: block; 然後將錨標記的高度設置爲100％。將div標籤高度設置爲固定大小。

例如：

<html> 
<head> 
     <title>sample link</title> 

     <style type="text/css"> 
     .container { 
       border: 1px solid #C9F; 
       width: 50%; 
       height: 20px; 
     } 

     .container a { 
       display: block; 
       background: #FC6; 
       height: 100%; 
       text-align: center; 
     } 

     .container a:hover { 
       background: #996699; 
       color:#FFF; 
     } 

     </style> 

</head> 
<body> 

     <div class="container"> 
       <a href="http://www.stackoverflow.com">Stack Overflow</a> 
     </div> 


</body> 
</html>

來源

2012-06-19 06:59:23 RAN

上的鏈接我想改變股利和鏈接

回答

相關問題