Hover-Klasse nur anwenden, wenn Element ein Hyperlink ist

Question

Ich frage mich, wann ich an einem Projekt arbeitete, wenn ich dies erreichen könnte, aber angenommen, es scheint derzeit nicht möglich, dieses Verhalten ohne irgendeine Änderung der Struktur zu bekommen (ich würde wirklich gerne Halten Sie den Hover innerhalb seiner eigenen Klassendeklaration), was wäre die sauberste Lösung?

WENIGER

@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

Dies sollte das tun, was Sie wollen:

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

Fiddle

Answer 2

Ich würde eine :link CSS-Pseudoklasse verwenden, da <a> ohne href nicht als Hyperlink behandelt wird. Siehe bei https://jsfiddle.net/jsqdom1s/

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