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

Question

单击或悬停在 div 上时，它应该显示旁边的另一个 div，就像选项一样，它不能像下拉一样垂直，它必须水平继续

Answer 1

There are multiple ways to do it, but aligning div horizontally is done using css, it has nothing to do with hover events.有多种方法可以做到，但是水平对齐 div 是使用 css 完成的，它与悬停事件无关。 Try to understand the below code.试着理解下面的代码。

I am showing in 2 ways here我在这里以两种方式展示

(div1,div2) using css (div1,div2) 使用 css
(div3,div4) using javascript (div3,div4) 使用 javascript

Link: https://github.com/helloritesh000/how-to-display-another-div-element-next-to-the-first-div-element-horizontally-by链接： 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 元素？在第一个 div

问题描述

1 个解决方案

解决方案1
0 2019-02-14 20:33:36

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

问题描述

1 个解决方案

解决方案1 0 2019-02-14 20:33:36

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

解决方案1
0 2019-02-14 20:33:36