Menu
I have a collection of nested comments. My goal is to display a 'reply' option when hovering each comment separately. This means that I don't want the 'reply' option to show up for parent/sibling/children of the comment 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:
.comment {
padding: 10px;
border: 1px solid black;
margin-top: 10px;
}
.text {} .comment:hover > .reply {
display: inline-block;
}
.reply {
display: none;
}
.children-comments {
margin-left: 50px;
margin-top: 10px;
}<div class="comment">
<a class="text">wohoo</a>
<a class="reply">reply</a>
<div class="children-comments">
<div class="comment">
<a class="text">wohoo</a>
<a class="reply">reply</a>
<div class="children-comments">
</div>
</div>
<div class="comment">
<a class="text">wohoo</a>
<a class="reply">reply</a>
<div class="children-comments">
<div class="comment">
<a class="text">wohoo</a>
<a class="reply">reply</a>
<div class="children-comments">
<div class="comment">
<a class="text">wohoo</a>
<a class="reply">reply</a>
<div class="children-comments">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<a class="text">wohoo</a>
<a class="reply">reply</a>
<div class="children-comments">
</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 comment 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.
448
There are two easy ways that you can use to select nested elements in CSS. First, the descendant selector, and second the child selector. The descendant selector selects all the elements that are inside a given element.
if we define 2 HTML elements where we want to hover over one element & at the same moment want to change the style of another element then both the elements should be directly related as either parent-child or sibling, which indicates either one element must be inside another element or both elements should be within ...
popupbutton is the fastest.
The CSS id Selector The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.
The CSS class Selector The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name.
Nesting your CSS selectors is one small trick that makes things much easier down the road. You’ll write your CSS more quickly, apply style changes more efficiently, and not have to worry about remembering to place a slew of id or class attributes in the right HTML tags.
The :hover selector is used to select elements when you mouse over them. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.
CSS Selectors. CSS selectors are used to "find" (or select) the HTML elements you want to style. We can divide CSS selectors into five categories: Simple selectors (select elements based on name, id, class) Combinator selectors (select elements based on a specific relationship between them) Pseudo-class selectors (select elements based on ...
Your best option would be to change the markup a little bit and add a wrapper:
<div class="comment">
<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 comments individually using .content:hover > .reply
Example:
.comment {
padding: 10px;
border: 1px solid black;
margin-top: 10px;
}
.text {}
.content:hover > .reply {
display: inline-block;
}
.reply {
display: none;
}
.children-comments {
margin-left: 50px;
margin-top: 10px;
}<div class="comment">
<div class="content">
<a class="text">wohoo</a>
<a class="reply">reply</a>
</div>
<div class="children-comments">
<div class="comment">
<div class="content">
<a class="text">wohoo</a>
<a class="reply">reply</a>
</div>
<div class="children-comments">
<div class="comment">
<div class="content">
<a class="text">wohoo</a>
<a class="reply">reply</a>
</div>
</div>
<div class="children-comments">
<div class="comment">
<div class="content">
<a class="text">wohoo</a>
<a class="reply">reply</a>
</div>
<div class="children-comments">
<div class="comment">
<div class="content">
<a class="text">wohoo</a>
<a class="reply">reply</a>
</div>
<div class="children-comments">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<div class="content">
<a class="text">wohoo</a>
<a class="reply">reply</a>
<div class="children-comments">
</div>
</div>
</div>
</div>
</div>The content wrapper would expand to the area of the actual content of the comment (which makes the most sense).
However, you could also make the wrapper expand to the entire comment block as well (more than just the comment's content) by using positioning styles. For example:
/* OPTIONAL - These style changes make the content
* wrapper cover the entire comment block.
*/
.comment {
padding: 10px;
border: 1px solid black;
margin-top: 10px;
position:relative;
}
.comment .content {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
It just depends on your desired behavior.
(jsFiddle example)
50
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
