当用户鼠标悬停在类名为"reMode_hover"的元素上时,我try 应用背景色.

但是如果元素also"reMode_selected",我不想改变 colored颜色

注意:我只能使用CSS而不能使用javascript,因为我在某种有限的环境中工作.

为了澄清这一点,我的目标是在悬停时给第一个元素上色,而不是给第二个元素上色.

HTML

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

我在下面试过了,希望第一个定义能行得通,但没有成功.我做错了什么?

CSS

/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover 
{
}

.reMode_hover:hover 
{
   background-color: #f0ac00;
}

推荐答案

一种方法是使用多类 Select 器(没有空格,因为它是后代 Select 器):

.reMode_hover:not(.reMode_selected):hover 
{
   background-color: #f0ac00;
}
<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

Html相关问答推荐

如何访问django + tailwind中的媒体文件夹

HTML图像无法正确放大和缩小规模

如何格式化HTML文本,使其环绕关键字

CSS:显示块,第一个项目没有正确对齐

为什么使用Google字体的SVG徽标内的文本不能在网页上正确呈现?

仅包含名为X的子元素的元素的XPath?

Tailwind CSS:overflow-y Property Not Scrolling Unreliably to Bottom with top-[63px]

Flexbox在元素之间造成了太大的差距

你将如何为手机制作导航栏

动画的停止和启动并不顺利

div 中的垂直中心表格

如何防止弹性项目溢出容器?

Angular MatBadge 在高于 99 时不显示完整数字

无法在 CSS 中将 h1 标签居中

如何使容器的大小适合其 position:absolute; 子元素的大小

为什么使用 Css 只能看到 1 列而不是 3 列?

增加第一个字母的大小不再正确居中文本

如何将某些 div 的高度限制为具有 display flex 行的同一父 div 中的其他 div?

CSS 斜角与 3 行对齐

使元素扩展宽度减go margin-right