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就像：

#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中的第三个Id调用中... 重点是转换#navigation列表，而光标在#img上。抱歉英文不好。

Answer 1

除非您尝试破解系统，否则尝试执行此操作不会起作用。如果元素实际上是子元素，则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">

光标在图像上时转换文本

1 个答案: