Question

我最后有一张带有图片的文字。如果文本和图像没有空间，则图像不应该单独放在第二行。我用white-space: nowrap;组合了最后一个单词和图像。问题是悬停图像会触发悬停在文本上。我试图找出如何避免这种情况。这是我的代码：

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/

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

悬停图片时不应为文字加下划线

Answer 1

哇，这是一个艰难的问题。诀窍是制作整个事物nowrap，然后制作除了最后一个字之外的所有内容。最难的部分是让<span>嵌套正确。

这是一个有效的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;
}

Answer 2

我会这样做：

段落的第一句话包含在一个范围
段落的最后一个单词和图片包含在一个范围
跨度为display: inline-block以包含图像
图片为display: block并且float: right将图片保留在范围内文字的右侧
悬停附加到第一个跨度及其旁边的跨度

工作示例

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我搜索了一段时间，但能够找到解决方案。这是一个例子，我使用非常流行的Netflix＆＃39;悬停效果＆＃39;。我有一张卡片上的课程，我们称之为“＃＆＃39;卡和基础信息卡，我们会拨打＆＃39; hover card＆＃39;显示用户在课程卡上悬停的时间。课程卡显示最少的细节..悬停卡显示所有课程信息。

悬停卡正在使用缩放和不透明度的过渡替换课程卡。当悬停卡包含大量信息时，尽管没有向用户显示不透明度为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扩展内的内容超过了courseCard的固定高度，我们就看到了问题。以下css解决了这个问题：

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

然后将休息的hoverCard设置为

.hoverCard { visibility: hidden; }

隐藏不透明度仍然允许子div被悬停，但是可见性：隐藏了这个技巧。

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

3 个答案:

工作示例