Javascript 如何通过单击或悬停在第一个div元素旁边水平显示另一个div元素？第一节_Javascript

Javascript 如何通过单击或悬停在第一个div元素旁边水平显示另一个div元素？第一节

javascript

Javascript 如何通过单击或悬停在第一个div元素旁边水平显示另一个div元素？第一节,javascript,Javascript,单击或将鼠标悬停在一个div上时，它应该在旁边显示另一个div，like选项它不能是垂直的like下拉列表，它必须水平移动有多种方法，但水平对齐div是使用css完成的，与悬停事件无关。试着理解下面的代码我在这里展示了两种方式（div1，div2）使用css （div3，div4）使用javascript 链接： .分区{ 宽度：200px；高度：30px；浮动：左； } .parent1.div1{ 背景色：红色； } .第2分部{ 背景色：青色；显示：无； } .parent

单击或将鼠标悬停在一个div上时，它应该在旁边显示另一个div，like选项它不能是垂直的like下拉列表，它必须水平移动

有多种方法，但水平对齐div是使用css完成的，与悬停事件无关。试着理解下面的代码

我在这里展示了两种方式

（div1，div2）使用css
（div3，div4）使用javascript

链接：


.分区{
宽度：200px；
高度：30px；
浮动：左；
}
.parent1.div1{
背景色：红色；
}
.第2分部{
背景色：青色；
显示：无；
}
.parent1.div:hover+div{
显示：块；
}
div4.style.visibility='hidden'

Arul，欢迎来到Stack Overflow。我们鼓励在这里重复问题，因此，如果您可以发布一个链接到您尝试过的示例，这将有助于解决此问题。

<!doctype html>
<html>
<head>
<style type="text/css">
.div{
    width: 200px;
    height: 30px;
    float: left;
}

.parent1 .div1{
    background-color: red;
}

.div2{
    background-color: cyan;
    display: none;
}

.parent1 .div:hover + div{
    display: block;
}


</style>
</head>
<body>

<div class="parent1">
    <div class="div div1">
    </div>
    <div class="div div2">
    </div>
</div>
<div style="clear: both;"></div>
<div class="parent2">
    <div class="div div3" id="div3" onmouseover="div4.style.visibility='visible'" onmouseout="div4.style.visibility='hidden'" style="background-color: blue;">
    </div>
    <div class="div div4" id="div4" style="background-color: #ccc;">
    </div>
</div>
<script>
div4.style.visibility='hidden'
</script>
</body>
</html>