Question

如何在鼠标悬停图像时添加透明度，并且只突出显示该图像的文本。这是我的代码编辑或修改的内容。

提前谢谢你。任何代码更改都是受欢迎的，也欢迎其他实现此方法的方式。

a {
    color: #355f7c;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

div.body p, div.body dd, div.body li {
    text-align: justify;
    line-height: 130%;
}

div.body h1,
div.body h2,
div.body h3,
div.body h4,
div.body h5,
div.body h6 {
    font-family: 'Trebuchet MS', sans-serif;
    background-color: #f2f2f2;
    font-weight: normal;
    color: #20435c;
    border-bottom: 1px solid #ccc;
    margin: 20px -20px 10px -20px;
    padding: 3px 0 3px 10px;
}

div.body h1 { margin-top: 0; font-size: 200%; }
div.body h2 { font-size: 160%; }
div.body h3 { font-size: 140%; }
div.body h4 { font-size: 120%; }
div.body h5 { font-size: 110%; }
div.body h6 { font-size: 100%; }

a.headerlink {
    color: #c60f0f;
    font-size: 0.8em;
    padding: 0 4px 0 4px;
    text-decoration: none;
}

Answer 1

您的css（img）中没有任何图像元素

以下是将鼠标悬停在元素上时不透明度降低的CSS示例：

img{
opacity: 1;
}

img:hover{
opacity: 0.2;
}

Answer 2

示例代码。

 img{
    opacity: 3.0;
    }

img:hover{
opacity: 1.2;
}

Answer 3

你可以使用这样的东西。图像＆amp;链接中包含的文本，当链接悬停时，图像变为低亮显示，文本正常。您可以使用position: absolute希望文本放置在图像中的某个位置。

 <a href="#">
        <img src="" alt="">
        <span>Text</span>
 </a>

css

a {
    display: block;
}
a:hover img {
    opacity: 0.2;
}

添加图像并将图像文本悬停

3 个答案: