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

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 上时，我如何将其应用到我的 CSS，我希望它切换颜色（图像 2）。蓝色的颜色代码是 #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 伪class，它会在鼠标悬停在元素上时更改样式。将您想要的颜色（背景色和字体颜色）应用于将覆盖默认（非悬停）样式的悬停属性。如果您将字体和背景颜色放在 .borderbox class 中，那么您只需在 .borderbox:hover 中覆盖它们，如下所示：

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

完整示例如下：

.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;

}

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

Answer 3

你应该使用 :hover 伪类。如果这对您来说是新的，请查看 W3Schools 上的解释。之后您的代码应该如下所示：

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

希望这能解决您的问题。 :-)

Answer 4

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

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

只需添加边框颜色：

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

干杯

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

Switch colours when hovering over an image

html

css

wordpress