Question

我试图让悬停时具有不透明色效果的图像以及点击它以打开图像链接

的可能性

＆＃13;

.image {
    position: relative;
    width: 100%;
    height: 100%;
}

.image img {
    width: 100%;
    vertical-align: top;
}

.image:after {
    content: '\A';
    position: absolute;
    width: 100%; height:100%;
    top:0; left:0;
    opacity: 0;
    background:yellow;
    transition: all 1s;
    -webkit-transition: all 1s;
}

.image:hover:after {
    opacity: 1;
    cursor: pointer;
}

＆＃13;

<div class="image"><a href="http://wikipedia.org/"><img width="700" height="394" src="http://placehold.it/700x394" class="img-responsive wp-post-image" alt="Responsive image"  sizes="(max-width: 700px) 100vw, 700px"></a></div>

＆＃13;

但问题是他们无法打开图片的链接

Answer 1

问题是绝对定位;在这种情况下，锚链接不会包装您的图像，所以我已将您的锚链接移到外面以包装所有内容：

.image {
    position: relative;
    width: 100%;
    height: 100%;
}

.image img {
    width: 100%;
    vertical-align: top;
}

.image:after {
    content: '\A';
    position: absolute;
    width: 100%; height:100%;
    top:0; left:0;
    opacity: 0;
    background:yellow;
    transition: all 1s;
    -webkit-transition: all 1s;
}

.image:hover:after {
    opacity: 1;
    cursor: pointer;
}

<a href="http://wikipedia.org/"><div class="image"><img width="700" height="394" src="http://placehold.it/700x394" class="img-responsive wp-post-image" alt="Responsive image"  sizes="(max-width: 700px) 100vw, 700px"></div></a>

无法打开图片的链接

1 个答案: