admin管理员组文章数量:1418437
I have a collection of nested ments. My goal is to display a 'reply' option when hovering each ment separately. This means that I don't want the 'reply' option to show up for parent/sibling/children of the ment I am hovering.
The only similar question I have found is: Can I control CSS selection for :hover on nested elements? I am not even sure his needs are the same, and additionally the fiddles don't seem to work.
I have prepared a fiddle so you better see what I mean:
ment {
padding: 10px;
border: 1px solid black;
margin-top: 10px;
}
.text {} ment:hover > .reply {
display: inline-block;
}
.reply {
display: none;
}
.children-ments {
margin-left: 50px;
margin-top: 10px;
}
<div class="ment">
<a class="text">wohoo</a>
<a class="reply">reply</a>
<div class="children-ments">
<div class="ment">
<a class="text">wohoo</a>
<a class="reply">reply</a>
<div class="children-ments">
</div>
</div>
<div class="ment">
<a class="text">wohoo</a>
<a class="reply">reply</a>
<div class="children-ments">
<div class="ment">
<a class="text">wohoo</a>
<a class="reply">reply</a>
<div class="children-ments">
<div class="ment">
<a class="text">wohoo</a>
<a class="reply">reply</a>
<div class="children-ments">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ment">
<a class="text">wohoo</a>
<a class="reply">reply</a>
<div class="children-ments">
</div>
</div>
</div>
</div>
I have a collection of nested ments. My goal is to display a 'reply' option when hovering each ment separately. This means that I don't want the 'reply' option to show up for parent/sibling/children of the ment I am hovering.
The only similar question I have found is: Can I control CSS selection for :hover on nested elements? I am not even sure his needs are the same, and additionally the fiddles don't seem to work.
I have prepared a fiddle so you better see what I mean:
.ment {
padding: 10px;
border: 1px solid black;
margin-top: 10px;
}
.text {} .ment:hover > .reply {
display: inline-block;
}
.reply {
display: none;
}
.children-ments {
margin-left: 50px;
margin-top: 10px;
}
<div class="ment">
<a class="text">wohoo</a>
<a class="reply">reply</a>
<div class="children-ments">
<div class="ment">
<a class="text">wohoo</a>
<a class="reply">reply</a>
<div class="children-ments">
</div>
</div>
<div class="ment">
<a class="text">wohoo</a>
<a class="reply">reply</a>
<div class="children-ments">
<div class="ment">
<a class="text">wohoo</a>
<a class="reply">reply</a>
<div class="children-ments">
<div class="ment">
<a class="text">wohoo</a>
<a class="reply">reply</a>
<div class="children-ments">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ment">
<a class="text">wohoo</a>
<a class="reply">reply</a>
<div class="children-ments">
</div>
</div>
</div>
</div>
Notice that using >
in the selector does work to ignore the sibling elements but it still selects the parent elements. In other words, no matter which ment you hover, the parent of them all will always show the 'reply' option.
Can this be done with CSS only at all? I'm open to js solutions but I'd be more than happy if there was a CSS only solution.
Share Improve this question edited May 23, 2017 at 12:33 CommunityBot 11 silver badge asked Jun 16, 2016 at 12:31 mezodmezod 2,3913 gold badges22 silver badges31 bronze badges 2- 1 Done, I didn't want to clutter the question with useless boilerplate, but point understood :) – mezod Commented Jun 16, 2016 at 12:47
- 2 You could still do that. Just use snippets and check the hide by default option. That way your code will be in question and the boilerplate won't show up unless expanded :) – Harry Commented Jun 16, 2016 at 12:54
2 Answers
Reset to default 7Your best option would be to change the markup a little bit and add a wrapper:
<div class="ment">
<div class="content"> <!-- Here -->
<a class="text">wohoo</a>
<a class="reply">reply</a>
</div>
By adding a div
wrapper for the content, you can target ments individually using .content:hover > .reply
Example:
.ment {
padding: 10px;
border: 1px solid black;
margin-top: 10px;
}
.text {}
.content:hover > .reply {
display: inline-block;
}
.reply {
display: none;
}
.children-ments {
margin-left: 50px;
margin-top: 10px;
}
<div class="ment">
<div class="content">
<a class="text">wohoo</a>
<a class="reply">reply</a>
</div>
<div class="children-ments">
<div class="ment">
<div class="content">
<a class="text">wohoo</a>
<a class="reply">reply</a>
</div>
<div class="children-ments">
<div class="ment">
<div class="content">
<a class="text">wohoo</a>
<a class="reply">reply</a>
</div>
</div>
<div class="children-ments">
<div class="ment">
<div class="content">
<a class="text">wohoo</a>
<a class="reply">reply</a>
</div>
<div class="children-ments">
<div class="ment">
<div class="content">
<a class="text">wohoo</a>
<a class="reply">reply</a>
</div>
<div class="children-ments">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ment">
<div class="content">
<a class="text">wohoo</a>
<a class="reply">reply</a>
<div class="children-ments">
</div>
</div>
</div>
</div>
</div>
The content wrapper would expand to the area of the actual content of the ment (which makes the most sense).
However, you could also make the wrapper expand to the entire ment block as well (more than just the ment's content) by using positioning styles. For example:
/* OPTIONAL - These style changes make the content
* wrapper cover the entire ment block.
*/
.ment {
padding: 10px;
border: 1px solid black;
margin-top: 10px;
position:relative;
}
.ment .content {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
It just depends on your desired behavior.
(jsFiddle example)
without changing your markup, instead hovering the parent .ment
, you can hover the adjacent sibling(using +
) .text
(because it always be there)
.ment {
padding: 10px;
border: 1px solid black;
margin-top: 10px;
}
.text {
display:inline-block
}
.text:hover + .reply {
display: inline-block;
}
.reply {
display: none;
}
.children-ments {
margin-left: 50px;
margin-top: 10px;
}
<div class="ment">
<a class="text"> wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo </a>
<a class="reply">reply</a>
<div class="children-ments">
<div class="ment">
<a class="text">wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo </a>
<a class="reply">reply</a>
<div class="children-ments">
</div>
</div>
<div class="ment">
<a class="text">wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo </a>
<a class="reply">reply</a>
<div class="children-ments">
<div class="ment">
<a class="text"> wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo </a>
<a class="reply">reply</a>
<div class="children-ments">
<div class="ment">
<a class="text"> wohoo wohoo wohoo wohoo </a>
<a class="reply">reply</a>
<div class="children-ments">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ment">
<a class="text"> wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo </a>
<a class="reply">reply</a>
<div class="children-ments">
</div>
</div>
</div>
</div>
本文标签: javascriptSelecting only immediately hovered element in CSS for nested elementsStack Overflow
版权声明:本文标题:javascript - Selecting only immediately hovered element in CSS for nested elements - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1745270768a2650877.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论