仅当元素是超链接时,悬停类才适用

时间:2017-09-17 16:43:16

标签: html css less mixins

我想知道我什么时候在项目上工作,如果我能做到这一点,但是假设目前似乎不可能在没有任何结构改变的情况下获得这种行为(我真的希望将鼠标悬停在它自己的类声明中)对你来说,什么是最干净的解决方案?

LESS

@blue: blue;
@blue-darker: darken(@blue, 20%);

.text-blue {
    color: @blue;

    /* something like that */
    &:hover when (element_reference == hyperlink) {
        color: @blue-darker;
    }
}

CSS

.text-blue {
    color: blue;
}

/* something like that */
a.text-blue:hover {
    color: #000099;
}

HTML

<p class="text-blue">Text in blue with no hover effect</p>
<a class="text-blue" href="#">Link in blue with hover effect</a>

2 个答案:

答案 0 :(得分:2)

这应该做你想要的:

.text-blue {
    color: @blue;
    a&:hover {
        color: @blue-darker;
    }
}

Fiddle

答案 1 :(得分:1)

我会使用:link CSS伪类,因为没有<a>的{​​{1}}不会被视为超链接。见https://jsfiddle.net/jsqdom1s/

href