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

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

先谢谢你。 任何代码更改都是受欢迎的，实现这一点的其他方法也是受欢迎的

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

---

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

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

img{
opacity: 1;
}

img:hover{
opacity: 0.2;
}

示例代码

 img{
    opacity: 3.0;
    }

img:hover{
opacity: 1.2;
}

---

你可以用这样的东西。链接中包含的图像和文本，当链接悬停时，图像低高亮显示，文本正常。您可以使用

position:absolute

将文本放置在图像中的某个位置

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

---

你的html在哪里？请为html和css指定一个完整的代码。我没有任何html，我希望从一开始就解决问题。可能重复@Banzay，但不重复。

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