【发布时间】：2016-05-02 04:39:09
【问题描述】：
我在编码方面还很新，我现在正在苦苦挣扎。
我目前有图像，当我悬停它时会出现文本。使用叠加层 + 不透明度。
我想要什么：
img = this picture
img hover = this picture
img on click = 我目前悬停时的橙色背景文本。
感谢您的帮助，对不起我的英语。
编辑：这是代码。 EDIT2：我想让它看起来像这样，但文本作为 onclick，而不是图片。基本上与我目前悬停时看到的文本相同：
img src="image1" alt="image"
onmouseover="this.src='image2';"
onclick="this.src='image3';
onmouseout="this.src='image1';"
.item .item-wrap {
overflow: hidden;
position: relative;
}
.item .item-wrap a {
display: block;
cursor: pointer;
}
.item .item-wrap .overlay {
background: #ed560e;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
zoom: 1;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.item .item-wrap img {
vertical-align: bottom;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.item .item-wrap .bieres-item-meta {
position: absolute;
top: 10%;
left: 10%;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
zoom: 1;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.item .item-wrap .bieres-item-meta h5 {
font: 15px/21px"raleway-heavy", sans-serif;
margin: 0;
color: white;
word-wrap: break-word;
}
.item .item-wrap .bieres-item-meta p {
font: 14px/18px"raleway-semibold", sans-serif;
color: #fbcab3;
margin: 0;
}
/* on item hover */
.item:hover .overlay {
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
opacity: 1;
zoom: 1;
}
.item:hover .bieres-item-meta {
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
opacity: 1;
zoom: 1;
}
.item:hover .item-wrap img {
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}<div class="bgrid item">
<div class="item-wrap">
<a href="#">
<img src="http://v5.lapiece.ch/images/portfolio/mobykid.jpg" alt="Moby Kid">
</a>
<div class="overlay"></div>
<div class="bieres-item-meta">
<h5>Moby Kid</h5>
</br>
<p style="margin-right: 20px;">
Apparence: Robe jaune pâle et trouble. Bonne tenue de mousse.</br>
</br>
Arôme: Fruité avec des notes de banane.</br>
</br>
Goût: Légèrement acidulé, avec des saveurs nets d'agrumes et discrètes de fruits tropicaux.
</br>
</br>
Alcool: 4.5 [ % ]</br>
Couleur: 6 [ EBC ]</br>
Amertume: 18 [ IBU ]</br>
Densité finale: 1009 [ g/l ]</p>
</div>
</div>
</div>【问题讨论】：
-
“你们可能可以直接通过浏览器检查我的索引和 css” - 也许我们可以。但我们不会。请隔离相关代码并将其粘贴到您的问题中。
-
对不起，这是我在这里的第一篇文章。我应该嵌入整个 index.html 和 css 文件吗？
-
不行，只隔离相关代码。您遇到图像问题并将鼠标悬停在其上，这是唯一需要嵌入的代码。
-
好的，我刚刚编辑了我的第一篇文章。
标签： html css image onclick hover