悬停 class 仅当元素是超链接时适用

Question

我想知道当我在一个项目上工作时是否可以实现这一点，但假设目前似乎不可能在不改变结构的情况下获得这种行为（我真的很想将悬停保持在它自己的 class 声明），对您来说，最干净的解决方案是什么？

少

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

Answer 1

这应该可以满足您的要求：

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

Fiddle

Answer 2

我会使用 :link CSS 伪类，因为没有 href 的 <a> 不会被视为超链接。参见 https://jsfiddle.net/jsqdom1s/

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

悬停 class 仅当元素是超链接时适用

Hover class apply only if element is an hyperlink

html

css

mixins

less