CSS：不触发悬停在父元素上的子元素

我有一个文本，结尾有一个图像。如果文本和图像没有空间，则图像不应单独位于第二行。我用

空白：nowrap组合最后一个单词和图像。问题是，将图像悬停会触发文本悬停。我正在想办法避免这种情况。这是我的密码：

html:

jsfiddle：

我只想用css来做这件事。您可以添加其他类并更改html的结构，只要图标不在没有文本的第二行

将图像悬停在文本下方不应划下划线
我会这样做：


这一段的第一个字用一个空格括起来

段落的最后一个单词和图像被包装在一个跨距中

给定的跨距
display:inline block
包含图像

图像为
display:block
，并具有
float:right
，以将其保持在范围内文本的右侧

悬停将附着到第一个跨距及其旁边的跨距


工作示例

.parent p span:first child:hover，
.父级p span:第一个子级：悬停+span{
文字装饰：下划线；
}
跨度{
显示：内联块
}
img{
显示：块；
浮动：对；
}

这是一个很长的词这是一个很长的词

哇，这真是一个艰难的时刻。诀窍是让整个事情
nowrap
，然后让除了最后一个词以外的一切都可以包装在里面。最困难的部分是正确地嵌套

下面是一个正在工作的JSFIDLE：

HTML:

我搜索了一会儿，但找到了解决办法。下面是一个我使用非常流行的Netflix“悬停效果”的例子。我有一张卡上的课程，我们称之为“课程”卡，还有一张基础信息卡，我们称之为“悬停卡”，当用户在课程卡上悬停时显示。课程卡显示了最少的细节。。悬停卡显示所有课程信息

悬停卡正在使用带有缩放和不透明度的过渡来替换课程卡。当悬停卡包含大量信息时，尽管不透明度为0时未向用户显示，但仍会在父卡上触发悬停效果

下面是代码

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

然后将静止的悬停卡设置为

.hoverCard { visibility: hidden; }

不透明度隐藏仍然允许子div悬停，但可见性：隐藏起了作用。
为什么不将悬停在
span
上，这样
img
将被排除在外呢？请尝试以下方法：我需要在文本悬停时在整个文本上加下划线。在你的提案中，“长”部分不是…这是你想要的吗？这非常接近。问题是文本从来不会以这种方式排成两行。
<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" />

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

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

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

.hoverCard { visibility: hidden; }