javascript - 在鼠标输入时显示不同的 div

标签 javascript html css

我正在尝试制作一个 div,您可以将鼠标悬停在该 div 上,然后会出现另一个。这是我目前所拥有的...

html

<div id="buttons">
<div id="box"></div>
<div id="content">content here</div>
</div>

CSS

#box {
position:absolute;
width: 10vw;
height: 10vw;
background-color: blue;
}

#content {
position:absolute;
width: 10vw;
height: 10vw;
background-color: red;
visibility: hidden;
}

jquery

$( "box" )
.mouseover(function() {
$( "content").style.visibility( "visible" );
})

非常感谢您的任何帮助。谢谢!

最佳答案

你可以使用:

('#box').hover(
  function () {
    $('#content').show(); //or css('visibility','visible');
  }, 
  function () {
    $('#content').hide(); //or css('visibility','hidden');
  }
);

这将显示/隐藏 div。你错过了“#”

关于javascript - 在鼠标输入时显示不同的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36320512/

相关文章:

javascript - 如何使 d3 饼图响应式?

javascript - 当 react 元素插入 DOM 时高亮显示它们 - Meteor

html - Angular 6 bootstrap 4 - 导航栏品牌标志在向下滚动时不会改变

javascript - 如何获取样式以 "string"开头的所有元素的计数

jquery - 将光标悬停在 slider 的左侧或右侧时,如何将光标转到左侧或右侧图标?

PHP/Web 脚本保护

javascript - 带有嵌入式 javascript 的 Ant 脚本试图读取文件

css - 按钮不显示在浏览器中

css - 如何在视频上叠加 Canvas

html - 水平菜单的单个图像