將鼠標懸停在元素上時更改文本和鏈接的顏色

我有一個非常簡單的元素，其中包含一些文本或鏈接。將鼠標懸停在元素上時更改文本和鏈接的顏色

我想要在將元素懸停時更改文本顏色和鏈接顏色。我無法讓它工作，我認爲這是因爲你不能選擇2個僞類。我如何得到這樣的工作？

CSS：

.test, .test a:link, .test a:visited { 
    color: white; 
    text-decoration: none; 
} 

.test:hover, .test:hover .test a:link, .test:hover .test a:visited { 
    color: yellow; 
    text-decoration: none; 
}

HTML：

<div class="test"> 
    testtext<br> 
    <a href="#">testlink</a> 
</div>

來源

2016-02-20 John Smith

使用''＃id選擇，而不是類 –

@NenadVracar不能解決問題。這個例子是打字錯誤。 –

像這樣做只使用CSS

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>hover</title> 
 

 
<style type="text/css"> 
 
    body{ 
 
    margin:0; 
 
    padding:0; 
 
    } 
 

 
div.test{ 
 
    width: 200px; 
 
    height: 200px; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    color: black; 
 
} 
 

 
div.test a{ 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 

 
.test:hover, .test:hover a{ 
 
    color: orange; 
 
} 
 

 

 
</style> 
 

 
</head> 
 
<body> 
 

 
<div class="test"> 
 
test text<br/> 
 
<a href="#">test link</a> 
 
</div> 
 

 

 

 

 
</body> 
 

 

 

 
</html>

還是有點jQuery你可以做更多...這樣。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>hover</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 

 
<style type="text/css"> 
 
    body{ 
 
    margin:0; 
 
    padding:0; 
 
    } 
 

 
div.test{ 
 
    width: 200px; 
 
    height: 200px; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
} 
 

 
div.test a{ 
 
    text-decoration: none; 
 
    color:black; 
 
} 
 

 
    
 

 

 
</style> 
 

 
</head> 
 
<body> 
 

 
<div class="test"> 
 
test text<br/> 
 
<a href="#">test link</a> 
 
</div> 
 

 

 
<script type="text/javascript"> 
 
$(".test").mouseenter(function(){ 
 
    $(this).css({"color":"orange"}); 
 
    $("a").css({"color":"orange"}) 
 
}); 
 

 
    $(".test").mouseleave(function(){ 
 
    $(this).css({"color":"black"}); 
 
    $("a").css({"color":"black"}) 
 
}); 
 
</script> 
 

 

 
</body> 
 

 

 

 
</html>

來源

2016-02-20 15:42:16

給您鏈接試試這個

#test, #test a { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 

 
#test:hover, #test:hover a { 
 
    color: yellow; 
 
}

<div id="test">testtext<br><a href="#">testlink</a></div>

來源

2016-02-20 15:28:44

只是正確的路徑：

.test, 
.test a:link, 
.test a:visited { 
    color: white; 
    text-decoration: none; 
} 
.test:hover, 
.test:hover a:link, 
.test:hover a:visited { 
    color: yellow; 
    text-decoration: none; 
}

jsfiddle

來源

2016-02-20 15:33:29

#test, #test a, #test a:visited { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 

 
#test:hover, #test:hover a, #test a:visited { 
 
    color: yellow; 
 
}

<div id="test">testtext<br><a href="#">testlink</a></div>

來源

2016-02-20 15:34:34 iamsiddique

將鼠標懸停在元素上時更改文本和鏈接的顏色

回答

相關問題