gpt4 book ai didi

html - 当一个兄弟绝对定位时如何保留兄弟元素位置?

转载 作者:行者123 更新时间:2023-11-28 10:22:30 24 4
gpt4 key购买 nike

在下面的代码片段中,child div 通常定位到 :hover。 ed ,当它变成绝对定位时。此标记背后的原因是在我无法使用 <select> 的有限环境中模拟弹出式样式。 (以及其他限制)。

child悬停时,兄弟元素跳来跳去,这是预期的,因为 block 的内容已更改。

但是我怎样才能保持他们的定位呢?也就是说,我可以添加什么CSS来防止 sibling 在child时跳来跳去?悬停。

Javascript 也是不允许的,所以请不要使用 JS 回答。

跳到下面的编辑

HTML:

<div class="container">
<div class="child">
<span class="d4"></span>
<label><input type="radio" name="radio" value="1"/>One</label>
<label><input type="radio" name="radio" value="2"/>Two</label>
</div>
<input type="text" name="sibling"/>
<button name="sibling2">Button</button>
</div>

CSS:

.container, .child, button {
display:inline-block;
}

.child {
vertical-align: middle;
width: 35px;
height: 35px;
}

.child:hover {
background: gray;
position:absolute;
width: 100px;
height: auto;
}

.child:hover > .d4 {
display: none;
}

.child label {
display:none;
}

.child:hover label {
display: inline-block;
}

.d4 {
background-position: -411px -1px;
width: 35px;
height: 35px;
background-image: url("https://i.imgur.com/zkgyBOi.png");
background-repeat: no-repeat;
color: transparent;
display: inline-block;
}

这是一个 fiddle :http://jsfiddle.net/cpctZ/1/


编辑

新 fiddle :http://jsfiddle.net/cpctZ/48/

我过于简化了我原来的问题。事实上child中有多个 child 代表各种下拉选项。

图像和 radio 必须是兄弟元素,以便根据所选 radio 有条件地显示正确的图像:

.child:not(:hover) input[name="radio"][value="1"]:checked ~ .d4 {
display: block;
}
.child:not(:hover) input[name="radio"][value="2"]:checked ~ .d8 {
display: block;
}

注意兄弟选择器。如果图像放置在 radio 之外的 div 中,则无法说“如果选中相应的 radio 则显示图像”

更新的 HTML

<div class="container">
<div class="child">
<input type="radio" name="radio" value="1" checked="true" />
<label>d4</label>
<input type="radio" name="radio" value="2" />
<label>d8</label>
<div class="d4"></div>
<div class="d8"></div>
</div>
<input type="text" name="sibling" />
<button name="sibling2">Button</button>
</div>

所以问题仍然存在:\如何在悬停子项时防止那些兄弟元素移动,同时保持上述功能?

最佳答案

实际上,我认为您实际上根本不需要使用定位。这一切都可以通过 display:none

实现

JSfiddle Demo

CSS

.container, .child, button {
display:inline-block;
}

.child {
vertical-align: middle;
width: 100px;
height: 35px;
}

.child:hover {
background: gray;

height: auto;
}

.child:hover > .d4 {
display: none;
}
.child label {
display: none;
}

.child:hover label {
display: inline-block;
}

.d4 {
background-position: -411px -1px;
width: 35px;
height: 35px;
background-image: url("https://i.imgur.com/zkgyBOi.png");
background-repeat: no-repeat;
color: transparent;
display: inline-block;
}

关于html - 当一个兄弟绝对定位时如何保留兄弟元素位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23915440/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com