Question

我是CSS的新手，正在尝试在图像上实现功能，即-当有人将鼠标悬停在图像上时，将显示“阅读更多”按钮。这是我到目前为止的代码-

HTML-

<div class="container"> 
   <img src="./images/pairingo.png">
   <div class="button"><a href="#">READ MORE</a></div>   
</div>

CSS-

.container{
    position: relative;
    margin-top: 20px;
}

.container .button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #555;
    opacity: 0;
    font-size: 16px;
    padding: 12px 24px;
    border-radius: 5px;
    transition: opacity .5s;
}

img{
     width:40%;
     height:40%
}

img:hover .button{
    opacity:1;
}

这似乎不起作用。也许我在悬停部分做错了什么？任何帮助将不胜感激。

Answer 1

您需要将悬停CSS添加到.container类。因为img是.container类的子级，而.button不是img的子级。

尝试一下。

.container{
    position: relative;
    margin-top: 20px;
    width: 300px;
    height: 300px;
}

.container .button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #555;
    opacity: 0;
    font-size: 16px;
    padding: 12px 24px;
    border-radius: 5px;
    transition: opacity .5s;
}

img{
     width:100%;
}

.container:hover .button{
    opacity:1;
}

<div class="container"> 
   <img src="https://placehold.it/300x300/ccc/666?text=" class="img-responsive" alt="">
   <div class="button"><a href="#">READ MORE</a></div>   
</div>

Answer 2

您在这里：

设置container的{{1}}和top属性，使按钮在任何需要的地方可见。

left

.container{
    position: relative;
    margin-top: 20px;
}

.container .button {
    position: absolute;
    top: 10%;
    left: 20%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #555;
    opacity: 0;
    font-size: 16px;
    padding: 12px 24px;
    border-radius: 5px;
    transition: opacity .5s;
}

img{
     width:80px;
     height:80px;
}

.container:hover .button{
    opacity:1;
}

将鼠标悬停在图像上时按钮显示

2 个答案: