我发现了这段简洁的代码,可以使悬停时的图像变暗/着色。
如何在悬停时在中间添加文本?
.outerLink {
background-color: black;
display: block;
opacity: 1;
filter: alpha(opacity=100);
width: 200px;
text-align: center;
line-height: 100px;
font-size: 0px;
font-family: Arial;
}
img.darkableImage {
opacity: 1;
filter: alpha(opacity=100);
}
img {
border: 0;
display: block;
}
<body>
<a href="http://www.google.com" class="outerLink">
<img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200" class="darkableImage" onmouseout="this.style.opacity = 1; this.filters.alpha.opacity = 100" onmouseover="this.style.opacity = 0.6; this.filters.alpha.opacity = 60" />
</a>
</body>
https://jsfiddle.net/JCprog/s1bsrj91/一般情况下,您希望避免在标记中添加javascript,我将坚持使用css。
https://jsfiddle.net/qz235wxy/69/.container {
width: 100%;
height: 100%;
}
.text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
font-family: helvetica;
font-size: 5em;
text-align: center;
color: white;
font-size: 5em;
background-color: rgba(0, 0, 0, 0.6);
}
.container:hover .text{
display: block;
}
<div class='container'>
<a href="http://www.google.com" target="_blank">
<img class='image' src="http://www.thetimes.co.uk/tto/multimedia/archive/00342/114240651_cat_342943c.jpg" alt="cat">
<span class='text'>CAT</span>
</a>
</div>