变换文本，同时光标在图像

我想改变列表的文本，而鼠标移动到图片，我的列表中包含他们两个项目+图标带有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

变换文本，同时光标在图像

回答

相关问题