Question

我发现这个简洁的代码会在悬停时使图像变暗/变色。

如何在悬停时在中间添加文字？

.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/

Answer 1

一般来说，你想避免将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>

Div在中间显示文本，在悬停时显示文本

1 个答案: