Question

在Firefox中，它按预期工作，但在Chrome li 文字中淡入。我尝试用 a，li 对所有内容进行分组，但它输出的所有li元素的不透明度为0.5，而 a 元素仍然正确。

HTML

<h2> Foo  <a href = "http://www.google.com" target = "_blank">Link</a>  </h2>
<h2> Foo2 <a href = "http://www.stackoverflow.com" target = "_blank">Link</a> </h2>
<hr>

<h2>Index</h2>

<ol>
<a href = "#images"><li>photo</li></a>
<a href = "#video"><li>Video</li></a>
<a href = "#videogame"><li>Videogame</li></a>
</ol>

和css

li
{
list-style-type:none;
}


a
{
clear:both;
color: #0db9d2;
opacity:1;
-webkit-opacity:1;
-moz-opacity:1;
transition:opacity .25s ease-in-out;
-webkit-transition:opacity .25s ease-in-out;
-moz-transition:opacity .25s ease-in-out;
}

a:visited{
color: #28548d;
}

a:hover{
opacity:0.5;
-webkit-opacity:0.5;
-moz-opacity:0.5;
}

Answer 1

LI-text没有淡入的原因是你的CSS选择器特别针对A个元素。这就是为什么只有A - 元素中的文字会淡出（LI元素中的文字节点位于A之外）。

在LI中包含A - 元素是zvona指出的非法HTML语法，但我们可以通过移动A内的LI来解决这个问题。 / p>

<li><a href="#images">photo</a></li>

这是你的代码和语法改变的小提琴： http://jsfiddle.net/erlingormar/hshjydLg/

这是你想要的效果吗？

Answer 2

您需要<li>

中的<ol>列表

<h2> Foo  <a href = "http://www.google.com" target = "_blank">Link</a>  </h2>       
<h2> Foo2 <a href = "http://www.stackoverflow.com" target = "_blank">Link</a> </h2>    
<hr>    
<h2>Index</h2>

<ol>
    <li><a href="#images">photo</a>
    </li>
    <li><a href="#video">Video</a>
    </li>
    <li><a href="#videogame">Videogame</a>
    </li>
</ol>

Fiddle link

li元素没有响应chrome中的fadein css

2 个答案: