文章/答案/技术大牛

发布

社区首页 >问答首页 >在图像上方盘旋时切换颜色

问在图像上方盘旋时切换颜色
EN

Stack Overflow用户

提问于 2015-01-18 19:34:42

回答 4查看 61关注 0票数 0

我用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;

}

我如何实现这一点到我的CSS，当你的鼠标悬停在图像1，我希望它切换颜色(图2)。蓝色的颜色代码是#00a0df。

我网站的URL

html

css

wordpress

回答 4

Stack Overflow用户

回答已采纳

发布于 2015-01-18 19:38:55

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

小提琴

票数 2

Stack Overflow用户

发布于 2015-01-18 19:42:39

您可以使用CSS :hover伪类，当鼠标悬停在元素上时，它会更改样式。将所需的颜色(背景颜色和字体颜色)应用于悬停属性，该属性将覆盖默认(非悬停)样式。如果将字体和背景色放置在.borderbox类中，则只需在.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>

票数 1

Stack Overflow用户

发布于 2015-01-18 19:46:58

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

为了得到你想要的白色边框当你悬停在它上面。

只需添加边框颜色：

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

干杯

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28013912

复制

相似问题

问在图像上方盘旋时切换颜色
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在图像上方盘旋时切换颜色EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在图像上方盘旋时切换颜色
EN