2011-11-25 129 views
-1

我目前正在努力解決一個問題,我找不到原因。 目前我的錨點懸停狀態在Firefox和IE中無法正常顯示。有趣的是,當我用螢火蟲探索是否應用了這種風格時,它就在那裏,但瀏覽器沒有顯示它。這真的讓我瘋狂!錨鏈接懸停狀態不顯示

鏈接包含在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; 
} 
+2

儘量縮小您的示例代碼,並對您提出的問題更具體。這增加了獲得答案的機會。 –

回答

0

第二個環節都有class="link_secondario"屬性,但你只能定義:

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

要麼改變第二的鏈接屬性爲(如果有相同的屬性,你不需要兩個類)或定義:

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