Question

我创建了一个带有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。

URL to my website

Answer 1

将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;
}

FIDDLE

Answer 2

您可以使用CSS :hover伪类，当鼠标悬停在元素上时会更改样式。将您想要的颜色（背景和字体颜色）应用于悬停属性，该属性将覆盖默认（非悬停）样式。如果您将字体和背景颜色放在.borderbox类中，那么您只需在.borderbox:hover中覆盖这些颜色，如下所示：

.borderbox:hover {
  background-color: #00a0df;
  color: white;
}

完整的例子如下：

＆＃13;

.borderbox {
    border-style: dashed;
    border-width: 2px;
    border-color: #d3d3d3;
    color: #00a0df;
    position: absolute;
    height: 362px; !important
    width: 241px;  !important
    top: 0;
    left: 0;
    margin-right: 5%;      
}

.borderbox:hover {
  background-color: #00a0df;
  color: white;
}

h3.header-3 {
    font-size: 130px;
    text-align: center;
    margin: 4px auto 17px;
}

p.paragraph-text {
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;
    font-family: inherit; font-weight: bold;

}

＆＃13;

<body>
    <div class="borderbox">
        <h3 class="header-3">+</h3>
        <p class="paragraph-text">visa fler bästsäljare</p>
    </div>
</body>

＆＃13;

Answer 3

http://jsfiddle.net/mk7hrs49/3/

为了在将鼠标悬停在其上时获得所需的白色边框。

只需添加边框颜色：

.borderbox:hover{
    background-color: #00a0df;
    color: #FFF;
    border-color: white;  <---
}

欢呼声

Answer 4

你应该使用：hover Pseudoclass。如果您不熟悉，请查看W3Schools上的说明。之后你的代码应该是这样的：

.borderbox:hover {
#Here comes all your css on hover
background-color: #00a0df;
}

希望这能解决您的问题。： - ）

将鼠标悬停在图像上时切换颜色

4 个答案: