要素がハイパーリンクの場合にのみホバークラスが適用されます

Question

私はこれを達成できればプロジェクトに取り組んだのですが、現時点では構造の変更なしにこの動作を得ることはできないと仮定しています。あなたのクラス宣言の中にホバーを置いてください）、あなたには、最もクリーンな解決策は何でしょうか？

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> 

Answer 1

これは、あなたが欲しいものを行う必要があります。

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

Fiddle

Answer 2

hrefなし<a>は、ハイパーリンクとして扱われていないので、私は、:link CSS疑似クラスを使用します。 https://jsfiddle.net/jsqdom1s/

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