CSS: Child element to not trigger hover on the parent

Question

I have a text with an image in the end. If there is no space for the text and image, the image should never go alone on the second row. I made this with white-space: nowrap; combining the last word and the image. The problem is that hovering the image triggers the hover on the text. I am trying to figure out how to do avoid this. Here is my code:

html:

<p class="parent">
    <span>This is a long word This is a long word This </span>
        <span class="nowrap">long<img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg" 
            style="width:102px;height:80px"/>
        </span>
</p>

css:

.parent:hover  {
     text-decoration: underline;
}

.nowrap
{
    white-space: nowrap;
}

jsfiddle: http://jsfiddle.net/5pbk9djp/27/

I want to do this with only css. You can add additional classes and change the structure of the html as long as the icon does not go on a second row without a text.

Hovering the image should not underline the text

why not do the hover on span so that img will be excluded — Chanckjh
– Chanckjh, Commented Oct 25, 2014 at 13:51
I need the whole text to be underlined when hovering on the text. In Your proposal the 'long' part is not ... — Mdb
– Mdb, Commented Oct 25, 2014 at 13:54
This is very close. The problem is that the text never goes on two rows that way. — Mdb
– Mdb, Commented Oct 25, 2014 at 14:21

Troy Gizzi · Accepted Answer · 2014-10-25 14:40:32Z

2

Whew, this was a tough one. The trick was to make the whole thing nowrap, but then make everything but the last word wrappable within that. The hardest part was getting the <span> nesting right.

Here's a working JSFiddle: http://jsfiddle.net/troygizzi/k33qw3nk/

HTML:

<span class="nowrap"><span class="hoverable"><span class="wrappable">This is a long word This is a long word This</span>
long</span><img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg" style="width:102px;height:80px" />

CSS:

.hoverable:hover {
    text-decoration: underline;
}
.nowrap {
    white-space: nowrap;
}
.wrappable {
    white-space: normal;
}

answered Oct 25, 2014 at 14:40

Troy Gizzi

2,5191 gold badge17 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

misterManSam · Accepted Answer · 2014-10-25 14:43:55Z

I would do it like this:

The first words of the paragraph are wrapped in a span
The last word of the paragraph and the image are wrapped in a span
The spans are given display: inline-block to contain the image
The image is display: block and has float: right to keep it to the right of the text inside the span
The hover is attached to the first span and the span next to it

Working Example

.parent p span:first-child:hover,
.parent p span:first-child:hover + span {
  text-decoration: underline;
}
span {
  display: inline-block
}
img {
  display: block;
  float: right;
}

<div class="parent">
  <p><span>This is a long word This is a long word </span><span>This<img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg" 
        style="width:102px;height:80px"/></span>
  </p>
</div>

Corey Byrum · Accepted Answer · 2018-06-05 15:09:48Z

I searched for a while but was able to find a solution. Here's an example where I'm using the very popular Netflix 'hover effect'. I have a course on a card that we'll call the 'course' card and an underlying informational card, we'll call the 'hover card' that shows when a user hovers on the course card. The course card shows minimal details.. the hover card shows all of the course information.

The hover card is replacing the course card using an transition with scaling and opacity. When the hover card contained a lot of information, despite not showing to the user with opacity 0, it still triggered the hover effect on the parent.

Here's a look at the code

<div class="courseCard" tabindex="0">
    <div class="content">
        <h2 class="courseName"></h2>
        <div class="presenter"></div>
    </div>
    <div class="activities"></div>
    <div class="hoverCard" tabindex="0">
        <div class="hoverContent">
            <h2 class="hoverName"></h2>
            <div class="hoverPresenter"></div>
            <div class="hoverDescription"></div>
        </div>
    </div>
</div>

If the contents inside of hoverCard extended passed the fixed height of the courseCard, we saw the problem. The following css solved the problem:

.courseCard:hover .hoverCard { visibility: visible; }

and then setting the resting hoverCard as

.hoverCard { visibility: hidden; }

Hiding with opacity still allowed the child div to be hovered but visibility: hidden did the trick.

Collectives™ on Stack Overflow

CSS: Child element to not trigger hover on the parent

3 Answers 3

Comments

Working Example

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Working Example

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related