Question

我有一个非常简单的元素，其中包含一些文本或链接。

当我将鼠标悬停在元素上时，我想改变文本颜色和链接颜色。我无法让它工作，我认为这是因为你不能选择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>

Answer 1

只需更正链接路径：

.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

Answer 2

试试这个

#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>

Answer 3

#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>

Answer 4

这样做只使用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>

将鼠标悬停在元素上时，会更改文本和链接的颜色

4 个答案: