我用 CSS 创建了一个 html 代码，它显示下面的图像 1(左图)。我想要完成的是，当您将鼠标悬停在图像 1 上时，我希望出现图像 2(右图)(不要介意大小差异)。
HTML:
<body>
<div class="borderbox">
<h3 class="header-3">+</h3>
<p class="paragraph-text">visa fler bästsäljare</p>
</div>
</body>
CSS:
.borderbox {
border-style: dashed;
border-width: 2px;
border-color: #d3d3d3;
position: absolute;
height: 362px; !important
width: 241px; !important
top: 0;
left: 0;
margin-right: 5%;
}
h3.header-3 {
font-size: 130px;
text-align: center;
color: #00a0df;
margin: 4px auto 17px;
}
p.paragraph-text {
font-size: 20px;
text-align: center;
color: #00a0df;
text-transform: uppercase;
font-family: inherit; font-weight: bold;
}
当您将鼠标悬停在图像 1 上时，我希望它切换颜色(图像 2)，我该如何将此实现到我的 CSS。蓝色的颜色代码是 #00a0df。
最佳答案
将 color: #00a0df; 添加到 borderbox 并将文本的颜色更改为 color: inherit。然后在悬停时，您可以更改 background-color、文本 color、border 颜色和任何其他您想要的颜色:
.borderbox {
border-style: dashed;
border-width: 2px;
border-color: #d3d3d3;
position: absolute;
height: 362px; !important
width: 241px; !important
top: 0;
left: 0;
margin-right: 5%;
color: #00a0df; //add
}
h3.header-3 {
font-size: 130px;
text-align: center;
color: inherit; //change
margin: 4px auto 17px;
}
p.paragraph-text {
font-size: 20px;
text-align: center;
color: inherit; //change
text-transform: uppercase;
font-family: inherit; font-weight: bold;
}
.borderbox:hover{
background-color: #00a0df;
color: #FFF;
border-color: #FFF;
}
关于html - 将鼠标悬停在图像上时切换颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28013912/