CODEWITHSUNDEEP
css
Mdb
Mdb

Reputation: 8568

CSS: Child element to not trigger hover on the parent

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

Upvotes: 1

Views: 1103

Answers (3)

Corey Byrum
Corey Byrum

Reputation: 148

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.

Upvotes: 0

misterManSam
misterManSam

Reputation: 24692

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>

Upvotes: 1

Troy Gizzi
Troy Gizzi

Reputation: 2520

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;
}

Upvotes: 2

Related Questions