Question

<html>
<head>
<style> 


.box {
  float: left;
  width: 175px;
  height: 100px;
  margin: 0.2em;
  background color: DarkGray;
}

.head{
color: green;
}

h1{
color: white;
text-align: center;
height: 2%;
margin-top: auto;
margin-bottom: auto;
}

p{
color: LightSalmon;
text-align: center;
height: 5%;
margin-top: auto;
margin-bottom: auto;
}
a:link{
   text-decoration: none;
}
a:visited{
   text-decoration: none;
}
a:active{
   text-decoration: none;
}
a :hover{
   text-decoration: none;color:green;background-color: yellow;
}

</style>
</head>
<body>
<h1 class="head">
MY BLOCKS
</h1>
<a href="https://www.google.co.uk" target="_blank"><div class="box"><h1>Block0</h1><p>It is a floating Block0</p></div></a>
</body>
</html>

在这段代码中，我需要在鼠标悬停时更改我的'div'的颜色...我已经尝试了几乎我在网上找到的所有内容，包括来自这里的提示。没工作。请帮忙。我可以替换什么线

a :hover{
       text-decoration: none;color:green;background-color: yellow;
    }

我试过了

.box a :hover{
           text-decoration: none;color:green;background-color: yellow;
        }

和

 a :hover box{
           text-decoration: none;color:green;background-color: yellow;
        }

和

 a box:hover{
           text-decoration: none;color:green;background-color: yellow;
        }

等...

Answer 1

最好使用a标记的悬停状态。

a:hover .box {color:green; background-color: yellow;}

鼠标悬停在HTML，CSS中更改图块颜色

1 个答案: