カーソルが、私はマウスが画像の上にある間に、リストのテキストを変更したい画像

Question

上にあるときに、テキストを変換し、私のリストは、IDとの両方のそれらのアイテム+アイコンが含まれています

s[i++] = '<li id=\"'+ vizList[j].name +'\">'; 
s[i++] = '<a>'+ vizList[j].name + '</a>'; 
s[i++] = '<img id="img" src="../renderer/bundles/' + vizList[j].icon + '" width="268" height="120" style="display:block"/>'; 
s[i++] = '</li>'; 

と私のCSS私の問題は私のCSSでの第三のIdコールである

#listLumira li a { 
    display: block ; 
    background: #4682B4 ; 
    color: #fff ; 
    font: 1em "Trebuchet MS",Arial,sans-serif ; 
    line-height: 2em ; 
    text-align: center ; 
    text-decoration: none ; 
    padding: 3px 0 ; 
    margin-top:6px; 
} 
#listLumira li a:hover, #navigation li a:focus, #navigation li a:active { 
    background: #483D8B ; 
    letter-spacing: 2px; 
    text-transform: uppercase; 

} 

#img img:hover, #navigation li a:focus, #navigation li a:active { 
    background: #483D8B ; 
    letter-spacing: 2px; 
    text-transform: uppercase; 

} 

... ポイントはカーソルが#img上にある間#navigationリストを変換することです：のようなものです。 悪い英語で申し訳ありません。

Answer 1

あなたがシステムをハックしようとしない限り、このCSSを実行しようとしても動作しません。要素が実際に子要素である場合、CSSは:hover子セレクタのみをサポートしますが、タグでは不可能です。

この場合でもJavaScriptを使用できます。

$('img').on('mouseover', function(){ 
 
    $('p').css('text-decoration', 'underline'); 
 
}); 
 

 
$('img').on('mouseout', function(){ 
 
    $('p').css('text-decoration', 'none'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>text</p> 
 

 
<img src="http://placehold.it/200x200">