變換文本，同時光標在圖像

我想改變列表的文本，而鼠標移動到圖片，我的列表中包含他們兩個項目+圖標帶有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好比：

#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; 

}

我的問題是在我的CSS第三標識電話... 點是轉變#navigation名單，同時光標在#img。對不起，英語不好。

來源

2016-08-01 Simo

可你的jsfiddle添加完整的代碼？或在這裏？ –

在選擇器'#img img：hover'上設置'text-transform'是沒有意義的，因爲圖像沒有文本節點。 – Utkanos

如果你正在循環加載這個html，我會避免給一個'#img'的id，而是給一個類。頁面上的多個ID在語義上不正確。 –

試圖做到這一點CSS只是不會工作，除非你試圖破解系統。如果元素實際上是子元素，CSS僅支持:hover子選擇器，但在img標記中不可行。

雖然你可以使用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">

來源

2016-08-01 13:31:33 Randy

變換文本，同時光標在圖像

回答

相關問題