html - 在悬停时显示另一个 div 内的 div

标签 html css

我有两个 div;一个在另一个里面。我想在悬停在外部 div 上时显示内部 div,否则应该隐藏内部 div。外部 div 中也有一个始终显示的图像(内部 div 的同级),因此当将鼠标悬停在图像上时,它也会显示文本。有人可以帮助我吗?

<script>
 $(".divone").hover(
    function () {
       $(".divtwo").css("visibility","visible");
    },
    function () {
       $(".divtwo").css("visibility","hidden");
    }
 );
</script>


<div class="divone">
   <div class="divtwo">some text here</div>
   <img src="images/test.png" />
</div>


.divtwo{
    background-color:red;
    top:120px;
    height:50px;
    width:223px;
    position:absolute;
    visibility: hidden;
}

.divone{
     height:169px;
 position:relative;
}

最佳答案

你也可以有这样的风格:

.divone:hover .divtwo {
   visibility: visible;
}

不需要 JS。

关于html - 在悬停时显示另一个 div 内的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18371109/

相关文章:

javascript - jQuery UI onchange 每个循环未按预期工作

html - CSS3 动画滞后

html - Css 反转背景颜色

调整内容大小时,CSS 容器不会同时增长

css - 单击按钮打开 ag-grid-enterprise 侧栏

css - 根据部署加载不同的 CSS

jquery - 智能手机和 table 的 CSS 外壳

php - PHP 中的 EPUB 阅读器/查看器

php - 使用 PHP 将 HTML 插入到 div 标签中

html - 在 Safari 中使用 CSS 动画动态大小的内容