我制作了 2 个蓝色框和白色文本颜色,当您将鼠标悬停在它们上方时,文本颜色从白色变为蓝色,框颜色从蓝色变为白色。那部分有效。但是,当我将鼠标悬停在框中的文本下方时,即使我的鼠标仍在框“href”上,文本颜色也会变回蓝色。
看看我的代码:
body {
background: #DCDCDC
}
a {
text-decoration: none;
}
#galaxy {
width: 400px;
height: 300px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin: 0 auto;
margin-top: 100px;
color: white;
font-size: 30px;
border-radius: 10px;
}
#galaxy:hover {
background-repeat: no-repeat;
background-color: #FFF;
}
#test {
width: 400px;
height: 300px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin: 0 auto;
margin-top: 100px;
color: white;
font-size: 30px;
border-radius: 10px;
}
#test:hover {
background-repeat: no-repeat;
background-color: #F00;
}
.button-title-text {
text-align: center;
color: #FFF;
font-size: 16px;
padding-top: 100px;
}
.button-title-text:hover {
text-align: center;
color: rgb(37, 100, 165);
font-size: 16px;
padding-top: 100px;
}
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="#">
<div id="galaxy">
<div class="button-title-text">
<h1>Galaxy</h1>
</div>
</div>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="#">
<div id="test">
<div class="button-title-text">
<h1>test</h1>
</div>
</div>
</a>
</div>
如有任何帮助,我们将不胜感激。提前致谢。
最佳答案
整合您的代码并解决问题。
#galaxy
和 #test
框的样式相同(直到它们悬停)。我向它们添加了一个名为 .box
的类,并将样式移动到该选择器。
您的帖子中出现问题是因为您在框本身和里面的文本上有一个 :hover
规则。悬停在文本上的行为与所写的一样 - 只有当您将悬停直接悬停在文本上时才会激活。
为了解决这个问题,我从 .button-title-text
元素中删除了 color:
属性,允许它从 .box 继承颜色
。
然后我添加了一个更改文本颜色的 .box:hover
规则,当任一框悬停时该规则生效。
希望这对您有所帮助!
body {
background: #DCDCDC
}
a {
text-decoration: none;
}
.box {
width: 400px;
height: 300px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin: 0 auto;
margin-top: 100px;
color: white;
font-size: 30px;
border-radius: 10px;
}
.button-title-text {
text-align: center;
font-size: 16px;
padding-top: 100px;
}
.box:hover {
background-color: #FFF;
color: rgb(37, 100, 165);
}
#test:hover {
background-color: #F00;
}
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="#">
<div id="galaxy" class="box">
<div class="button-title-text">
<h1>Galaxy</h1>
</div>
</div>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="#">
<div id="test" class="box">
<div class="button-title-text">
<h1>test</h1>
</div>
</div>
</a>
</div>
关于html - 将鼠标悬停在文本下方时文本颜色会发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46383558/