CSS:子元素不会在父元素上触发悬停

数据库

我的文字最后带有图片。如果文本和图像没有空间,则图像绝对不能在第二行上单独显示。我通过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的结构,只要该图标在没有文本的第二行上没有出现即可。

悬停在图像上不应在文本下划线

特洛伊·吉兹(Troy Gizzi)

ew,这是一个艰难的过程。诀窍是使整个事情变得完整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;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

元素不会在Constraintlayout Android Studio中正确居中

元素不会在div中居中

jQuery UI动画不会在隐藏元素上发生

Python-格式化列表,以便元素不会在行之间分割

angular keyup事件不会在子组件上触发,而只会在父组件上触发

CSS悬停不会在ASP按钮上生效

元素不会在JavaScript中的页面加载时被隐藏

当“ label”元素包含子“ span”时,单击标签会在子而不是父上触发

为什么Text元素不会在View中垂直居中?

为什么我的简单元素不会在此React渲染方法中渲染?

DOM元素不会在React Spring动画中删除

过渡不会在悬停时触发

jQuery change()不会在新元素上触发

jQuery悬停在子元素上以更改父CSS

CSS在父元素上扩展子元素

父控制器上的$ scope。$ watch不会在子ng-select上触发

将鼠标悬停在子元素上,在父元素上更改CSS?

动画元素不会在悬停时更改样式

jQuery不会在“刷新”元素上注册事件

Firebase 用户对象不会在用户更新子自定义元素时触发新更改

父元素不跟随子元素

Javascript 单击侦听器,但不会在子元素上触发?

元素不会在更改事件中与 jQuery 一起显示

带有边距自动的元素不会在父级内部居中,并在 chrome 中显示 flex

附加条不会在 svg 元素上绘制

Blazor 元素不会在第一次加载时更新

悬停父元素时如何在子元素上应用CSS?

Javascript 单击 Svg/object 元素不会在移动设备上触发

存储在本地存储上的 li 元素不会在屏幕上显示