Question

我目前正在努力解决一个问题，我找不到原因。目前我的锚悬停状态在Firefox和IE中无法正常显示。有趣的是，当我用firebug探索是否应用了样式时，它就在那里，但是浏览器没有显示它。这真让我疯了！

该链接包含在H1标记中。相同的样式应用于span用户名，但它显示完美。

这是代码，希望你能解开谜团！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
    <tile> test</title>
</head>
<body>

    <div id="content1" class="boxContainer">
    <ul id="leggi-tab-content">
        <li class="anteprimaG">
           <div class="ombraCopertinaG ">
               <img  src="images/copertina-grande.gif" width="118" height="168" alt="Lorem ipsum dolor sit amet...">
               <div class="fantascienzaG">
               /div>
           </div>
           <div class="metadata">
               <span class="star-rating05"> </span> 
               <span>1234567 letture</span> 
           </div>
           <h1 class="truncationL">
               <a class="link_primario" href="http://www.xyz.zz">Lorem ipsum 
               dolor sit amet, consectetur dipiscing elit. Maecenas facilisis 
               porttitor interdum. Phasellusnec arcu quam.</a>
           </h1>
           <span class="username  truncationL">di <a class="link_secondario" href="#">username username username username username username username username username username username username username username username username </a></span>
           <p class="truncationB">“Lorem ipsum dolor sit amet, consectetur 
           adipiscing elit. Maecenas facilisis porttitor interdum. Phasellus 
           nec arcu quam. Donec id leo nibh. Sed vehicula dignissim libero, 
           a vehicula sapien sodales non. Nunc vel metus ante. Fusce pretium 
           convallis cursus. Lorem ipsum dolor sit amet, consectetur adipiscing 
           elit. Maecenas facilisis porttitor interdum. Phasellus nec arcu 
           quam. Donec id leo nibh. Sed vehicula dignissim libero, a vehicula 
           sapien sodales non. Nunc vel metus ante. Fusce pretium convallis 
           cursusLorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas 
           facilisis porttitor interdum. Phasellus nec arcu quam. Donec id leo 
           nibh. Sed vehicula dignissim libero, a vehicula sapien sodales non. 
           Nunc vel metus ante. Fusce pretium convallis cursusLorem ipsum dolor 
           sit amet, consectetur adipiscing elit. Maecenas facilisis porttitor 
           interdum. Phasellus nec arcu quam. Donec id leo nibh. Sed vehicula 
           dignissim libero, a vehicula sapien sodales non. Nunc vel metus ante. 
           Fusce pretium convallis cursus”</p>
    </li>
</ul>
</div>
</body>
</html>

CSS

a.link_primario:link { color: #0d6083; text-decoration:none;}
a.link_primario:visited { color: #0d6083; text-decoration: none;}
a.link_primario:hover { color: #cf1d3c; text-decoration: underline; }
a.link_primario:active { color: #0d6083; text-decoration: none;}

.ombraCopertinaG { 
      background: url(../images/ombra-copertina-grande.png) left bottom no-repeat; 
      position: relative;
      float: left;
      display: inline-block;
  margin-right: 10px;
}

.ombraCopertinaG img{ padding: 0 9px 5px 6px;}

.anteprimaG {margin-bottom: 20px;}

.anteprimaG h1 {
    width: 53.684210526315789473684210526316%; /*510px/950px*/
    margin-bottom: 0;
}

.anteprimaG p {
    height: 111px;
    width: 83.36842105263158%/*807px/950px*/
}

.username { 
    display: inline-block;
    width: 53.684210526315789473684210526316%;/*510px/950px*/
    margin: 9px 0 15px 0;
}

.metadata { float:right;}

.metadata span {
    display:inline-block;
    font-size: 0.75em ;/*12px/16px*/
    vertical-align: middle;
    margin-left:20px;
}

.metadata span:first-child{ 
    margin-left: 50px;
}

Answer 1

第二个链接具有class="link_secondario"属性，但您只定义了：

a.link_primario:link { color: #0d6083; text-decoration:none;}

将第二个链接属性更改为class="link_primario"（如果它具有相同的属性，则不需要两个类）或定义：

a.link_primario:link,a.link_secondario:link
    { color: #0d6083; text-decoration:none; }

锚点链接悬停状态不显示

1 个答案: