Question

以下是我正在处理的网站：revistapuerto

它是一个基于Wordpress的网站。我试图通过CSS实现的是当你将鼠标悬停在帖子的标题上时，将摘录显示在图片上。现在，当您将鼠标悬停在图片上时，会显示摘录。想要保持这种效果，并添加标题。

图片 - 摘录效果我是从其他用户那里得到的，如果它有帮助，这里是CSS：

#magia {
    position: relative;
}
#magia img {
    display: block;
}
#magia .cornerLink {
    width:494px;
    height:330px;
    opacity: 0;
    position: absolute;
    top: 32px;
    left: 0px;
    right: 0px;
    padding: 0px 0px;
    background-color: rgba(0,0,0,0.50);
    text-decoration: none;
    text-align: center;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
}
#magia:hover .cornerLink {
    opacity: 1.0;
}

谢谢！

Answer 1

老实说，这个问题不是很清楚，你需要提供更多信息。关于你所问的问题，我真正能提供的只是基本的小提琴：http://jsfiddle.net/MBLZx/

HTML：

<div class="showhim">HOVER ME
    <div class="showme">hai</div>
    <div class="ok">ok</div>
</div>

CSS：

.showme{ 
    display: none;
}
.showhim:hover .showme{
    display : block;
}
.showhim:hover .ok{
    display : none;
}

（网站也不会为我加载，可能只是我的工作电脑！）

显示了如何使用隐藏的div来使用悬停显示div。

更多信息，我可以帮助您：）

Answer 2

如果我明白你想要什么，这就是你如何实现它。

 #div-for-hover:hover #Div-you-want-to-show {
   display: block;
 }

方法很简单：CSS代码块只是说当你将 #div-for-hover 悬停时，我会显示＃Div-you-want-to-show

注意：悬停可以在标题，DIV，图片等上。

将一个div悬停在另一个div上

2 个答案: