Question

我有一个DIV鼠标悬停时会改变他的颜色

我想在将鼠标悬停在div上而不是图像上不一定要更改div内的图像时

在HTML

中

<div class="about">
<img class="about-project1">

CSS

.about-project1 {
    width: 121px;
    height: 42px;
    background: url("img/coching.png") no-repeat;
    border: 0px;
    }

.about:hover h3 {
    color: #fff;
}

.about a about-project1:hover {
    background: url("img/coching_white.png") no-repeat;
    }

另一件事是，尽管我告诉border：0，但图像带有边框为什么？

非常10倍乌迪

Answer 1

以下代码将满足您的要求：

HTML

<div class="about">
   <div class="about-project1"/>
</div>

CSS

.about-project1 {
    width: 121px;
    height: 42px;
    background: url("https://www.gstatic.com/webp/gallery3/1.sm.png") no-repeat;
}

.about:hover h3 {
    color: #fff;
}

.about:hover .about-project1 {
    background: url("https://www.gstatic.com/webp/gallery/4.sm.jpg") no-repeat;
}

最后，您的图像带有边框，因为它是一个img属性，没有src属性，我将原始代码更改为使用div。

Fiddle is here

鼠标悬停时CSS更改图像不起作用

1 个答案: