Question

我有一个png图形，我用作按钮，当用户将鼠标悬停在图像上时，我希望在按钮图像上显示颜色渐变。我发现的一切都是为背景图像而工作。

我的HTML看起来像这样：

<img id="connectionRight_img" class="btn" src="imgs/trailEnd_turnRight.png" alt="Right Arrow"/>

现在我想知道在悬停时需要在css内部完成颜色变化：

.btn:hover: {
??
}

任何建议将不胜感激。

Answer 1

您需要使用内联或内联块元素包装img，并将伪元素添加到仅在悬停时显示的包装

FIDDLE：http://jsfiddle.net/xz7xy8dg/

CSS：

.wrap {
    position:relative;
    display:inline-block;
}

.wrap::after {
    position:absolute;
    height: 100%;
    width:100%;
    top:0;
    left:0;
    background: -moz-linear-gradient(top, rgba(0,255,0,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,255,0,1)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(top, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(top, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(top, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#00ffffff',GradientType=0 );
    display:none;
    content: ' ';
}

.wrap:hover::after {
    display:block;
}

HTML：

<div class="wrap">
<img id="connectionRight_img" class="btn" src="imgs/trailEnd_turnRight.png" alt="Right Arrow"/>
</div>

Answer 2

这对我来说很好。如果可能，仍建议不要使用图像作为背景。它会降低性能。

<style>
    button.mylink  { border-width:0px; text-align:center; width : 60px; height : 20; display: inline-block; background-image : url(imgs/trailEnd_turnRight.png); text-decoration:none  }
    button.mylink:hover { background-image : url(imgs/trailEnd_turnRight_hover.png) }
</style>

<button class="mylink" href="#">abc</button>

悬停时向按钮图像添加渐变

2 个答案: