Question

当我将鼠标悬停在一个带有图片的圆圈div上时，我正试图获得一个说“阅读更多”的方形div。一直在尝试不同的东西，并没有在谷歌找到一个有效的解决方案。

HTML

        <div class = "portfolio" id = "first"> <!-- makes the circle -->
            <a href = "cake-page.html"> 
                <div class = "readm"> Read more </a> </div>
                <img src = "cake.jpg" /> 
                    <p> The cake </p> </div>

CSS

.portfolio {
    /* the circles on the portfolio-page */
    position: relative;
    border-radius: 100%;
    display: inline-block;
    height: 150px;
    width: 150px;
    border: 2px solid purple;
}



.portfolio.img {
    opacity: 1;
    transition: 1s ease;
    background-size: 90px 0px;
    overflow: hidden;
    border-radius: 100px;
   -webkit-border-radius: 50px;
   -moz-border-radius: 50px;
    width: 150px;
    height: 150px;
}

.portfolio:hover {
     /* hover effect on portfolio circles */
    opacity: 0.6;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    transition: 1 ease; 
    visibility: visible;
}

因此，文本将图像向下推或者它停留在圆圈的顶部，我无法将其与其他悬停效果一起悬停在一起。当将鼠标悬停在其他悬停效果上时，我希望“读取更多”在矩形div中弹出。我没有包括div类“readm”，因为我无法让它工作。仅供参考我对此很陌生。感谢。

Answer 1

如果没有一个有效的例子，那就有点难以看到readm css，因为我们需要看看什么不起作用。那就是说，你尝试过这样的事情：

.readm {
  opacity:0;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

.portfolio:hover .readm {
  opacity:1;
}

此外，我会将标签的开头放在readm div中。

Answer 2

首先，您需要修复标记。在关闭DIV之前，您正在关闭锚点（＆＃34; a＆＃34;）标记。仅此一点就会让你的CSS失败。我认为你想这样关闭DIV：

<div class="readm"><a href="cake-page.html">Read more</a></div>

HTML圈子div与图像试图获得悬停文本

2 个答案: