リンク内の強いタグを選択してホバーの色を変える方法

Question

これは本当に簡単だと思いますが、どうやってそれをするかわかりませんし、検索するときに助けを求める言葉もありません。

私にはリンクがあります。リンク内のテキストの一部は、<strong>タグ内にあります。 <strong>テキストには色があります。ホバーで<strong>テキストの色が変わっていません。どのように色を変えるのですか？

a:link { 
    color: rgb(25, 50, 50); 
    text-decoration: none; 
} 

a:visited { 
    color: rgb(25, 50, 50); 
    text-decoration: none; 
} 

a:hover { 
    color: rgb(100, 200, 200); 
    text-decoration: none; 
} 

a:active { 
    color: rgb(100, 200, 200); 
    text-decoration: none; 
} 

strong { 
    color: rgb(50, 100, 100); 
} 

<li><a href="xyz.html"><img src="resources/logo.jpg"><div class="list_text"><strong>Heading</strong><br>Sub heading</div></a></li> 

私はホバーとアクティブに強いタグ内のテキストは、「サブ見出し」テキストRGB（100200200）と同じ色になりたいです。

Answer 1

これを試してみてください：

a:link { color:rgb(25,50,50); text-decoration:none; } 
 
a:visited { color:rgb(25,50,50); text-decoration:none; } 
 
a:hover strong { color:rgb(100,200,200); text-decoration:none; } 
 
a:hover { color:rgb(100,200,200); text-decoration:none; } 
 
a:active { color:rgb(100,200,200); text-decoration:none; } 
 

 
strong { color:rgb(50,100,100); }

<a href="xyz.html"><strong>Heading</strong><br>Sub heading</a>

Answer 2

a:hover { 
    color: rgb(100, 200, 200); 
} 

a:hover strong { 
    color: rgb(100, 200, 200); 
} 

または

a:hover, 
a:hover strong { 
    color: rgb(100, 200, 200); 
} 

JSFiddleデモを：https://jsfiddle.net/b0nrf70p/1/

Answer 3

あなたは文脈的意味を持っているので、それがデフォルトのスタイルを持っているa:hover, a:hover > strong

a:link { 
 
    color: rgb(25, 50, 50); 
 
    text-decoration: none; 
 
} 
 

 
a:visited { 
 
    color: rgb(25, 50, 50); 
 
    text-decoration: none; 
 
} 
 

 
a:hover, a:hover > strong { 
 
    color: rgb(100, 200, 200); 
 
    text-decoration: none; 
 
} 
 

 
a:active { 
 
    color: rgb(100, 200, 200); 
 
    text-decoration: none; 
 
} 
 

 
strong { 
 
    color: rgb(50, 100, 100); 
 
}

<a href="xyz.html"><strong>Heading</strong><br>Sub heading</a>

Answer 4

https://codepen.io/Czeran/pen/zdZeGx

a>strong:hover {color: red;} 

Answer 5

Strong elementとの強力な要素が含まれるように、既存のホバーセレクターを変更することができます"ブラウザのユーザーエージェントのスタイルシート"は、より大きな重みを持っています。

ソリューションは、要素を定義してスタイルを書き換えるために、Cascading Style Sheets (CSS)カスケードデザインを使用しています。親要素から値を取得するために、カスケードパス「a strong」と値「inherit」を使用しました。ここで

はpreviewとコードです：

a { 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 
a strong { 
 
    color: inherit; 
 
    font-weight: inherit; 
 
} 
 

 
a:link, 
 
a:visited { 
 
    color: rgb(25, 50, 50); 
 
} 
 

 
a:hover, 
 
a:active { 
 
    color: rgb(100, 200, 200); 
 
} 
 

 
strong { 
 
    color: rgb(50, 100, 100); 
 
}

<a>anchor <strong>strong</strong></a>

私はそれに役立つ願っています。