Question

我有一个问题怎么办...将鼠标悬停在按钮上，图像会变暗？有些东西不起作用......

<!--- item -->
    <div class="col-lg-4">
        <div class="home-images">
            <img src="http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Hover-Effects/images/1.jpg">
        </div>
        <div class="home-images-content">
                    <h3>Lacobel</h3>
                    <a href="#" class="choose-home">Wybierz</a>
        </div>
    </div>
    <!--- item -->

Answer 1

有一种方法可以做到这一点，只需稍加修改标记，然后点 css定位。
基本上你可以使用css 相邻选择器（+），它只会选择前一个元素前面的元素。
在您的情况下，您希望在<a>之前放置<img>元素，以使其发挥作用：
HTML：

<!--- item -->
<div class="col-lg-4">
    <div class="home-images">
        <h3>Lacobel</h3>
        <a href="#" class="choose-home">Wybierz</a>
        <img src="http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Hover-Effects/images/1.jpg" />
    </div>
</div>
<!--- item -->

CSS：

.choose-home:hover + img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url(grayscale.svg);
    /* Firefox 4+ */
    filter: gray;
    /* IE 6-9 */
    ;
}
.home-images h3 {
    color:#fff;
}
.choose-home {
    background:url('../images/ok_icon.png') #00b9ee no-repeat;
    background-position:10% 50%;
    padding-left:60px;
    padding-top:12px;
    height:45px;
    width: 125px;
    display:block;
    color:#fff;
    border-radius:5px;
    position: absolute;
    top: 300px;
}
.choose-home:hover {
    background:url('../images/ok_icon.png') #ff0042 no-repeat;
    background-position:10% 50%;
    display:block;
    text-decoration:none;
    color:#fff;
    border-radius:5px;
}
.choose-home:focus {
    text-decoration:none;
    color:#fff;
}

在您的css中，您定位元素.choose-home:hover + img，其余部分绝对定位您的链接，位于图片position: absolute; top: 300px;下方。

JSFiddle

按钮悬停，图像更暗

1 个答案: