Question

单击或将鼠标悬停在div上时，它应该在其旁边显示另一个div，例如选项它不能像下拉菜单一样是垂直的，它必须水平放置

Answer 1

有多种方法可以执行此操作，但是使用css可以水平对齐div，它与悬停事件无关。尝试理解下面的代码。

我在这里以两种方式显示

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

链接：https://github.com/helloritesh000/how-to-display-another-div-element-next-to-the-first-div-element-horizontally-by

<!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>

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

1 个答案: