Question

我正在尝试创建一个可以将鼠标悬停在其上的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" );
})

任何帮助你不胜感激。谢谢！

Answer 1

你在许多地方混合使用纯javascript的JQuery ......

要么在JQuery中执行此操作：

$("#box").mouseover(function() {
    $("#content").css("visibility", "visible");
});

或在纯javascript中执行此操作：

document.getElementById("box").onmouseover = function() {
    document.getElementById("content").style.visibility = "visible";
};

但您只能使用css实现相同的效果：

＆＃13;

#box {
  position:absolute;
  width: 10vw;
  height: 10vw;
  background-color: blue;
}

#content {
  position:absolute;
  width: 10vw;
  height: 10vw;
  background-color: red;
  visibility: hidden;
}

#box:hover + #content {
  pointer-events: none;
  visibility: visible;
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用：

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

这将显示/隐藏div。你错过了'＃'

Answer 3

请在此处查看工作小提琴：https://jsfiddle.net/8dpcuztk/

此处，使用display：none。

代替visibility参数

所以从本质上讲，你将使用第二个div的显示和隐藏功能。

此外，您的选择器无法正常工作，因为您正在搜索ID并且必须在div id前面使用＃。

$("#box").on("mouseover", function() {
    $("#content").show();
})

Answer 4

使用jQuery append。

$("#box").on('mouseenter', function() {
 $("#content").append("<div class='box'></div>");
});

https://jsfiddle.net/32eckm71/40/

Answer 5

$( "#box" ).hover(
  function() {
    $( "#content" ).fadeIn(); //.show();
  },
  function(){
    $("#content").fadeOut(); //hide();
  }
);

#buttons{position:relative;}
#box {
position:absolute;top:0;left:0;width:10vw;height:10vw;background-color:blue;cursor:pointer;
}

#content {
position:absolute;top:100px;left:100px;width:10vw;height:10vw;background-color:red;
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="buttons">
  <div id="box"></div>
  <div id="content">content here</div>
</div>

在鼠标输入中显示不同的div

5 个答案: