javascript - Selecting only immediately hovered element in CSS for nested elements

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>

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 mezod 2,3913 gold badges22 silver badges31 bronze badges

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

Add a ment |

2 Answers 2

Sorted by: Reset to default 7

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Selecting only immediately hovered element in CSS for nested elements - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)