如何懸停使用CSS？

我正在使用Stacey，舊的投資組合支持，它允許通過您的mac文件夾建立您的網站。我發現我想達到的目標非常方便。我現在試圖通過html，Css代碼來修改它的佈局，在幾件事情上都成功了，但在這一點上陷入困境。我想懸停圖像，這是一個鏈接文本，這也是一個鏈接到相同的位置。如何懸停使用CSS？

HTML：

foreach $root do 
    if $children do 
    <p class="category col two"><em>@title</em></p> 
    <ul class="project-list col seven"> 
    foreach $children do 
     <li> 
      <div class="thumbnail col two"> 
       <a href="@url"><img src="@thumb" alt=""></a> 

      </div> 
      <div class="summary col two"> 
       <a href="@url"> 
       <p>@title</p> 
       <p><em>@date</em></p> 
       <p><em class="background">&ndash; @keywords</em></p> 
       </a> 
      </div> 
     </li> 
    endforeach 
    </ul> 
    endif 
endforeach

CSS：

ul.project-list div.thumbnail a { border: 0px; } 


ul.project-list div.summary{ 
height:140px; 
margin: 0px 0px 0px -140px; 
background-color: rgba(255, 255, 255, 0.7); 
visibility:hidden; 
} 
ul.project-list div.summary p {text-align: center; } 
ul.project-list div.thumbnail {display:block;} 
ul.project-list div.thumbnail:hover ul.project-list div.summary {visibility: visible;}

只有所有的代碼，@鏈接圖片的文件夾在Mac的一部分... 許多THX如果你是不屑。

小號

來源

2016-01-20 Stacey user

變化

ul.project-list div.thumbnail:hover ul.project-list div.summary {visibility: visible;}

到

ul.project-list div.thumbnail:hover + div.summary {visibility: visible;}

來源

2016-01-20 20:31:48

非常感謝，它的工作原理，但它現在閃爍......我想，如果你有任何建議阻止它.... –

@Staceyuser如果你的意思是說，一旦你將鼠標懸停在總結上，它就會閃爍，這是正常的，因爲我們只將目標放在圖像上進行懸停。你應該更好地使用'li'。所以試試'ul.project-list> li：hover div.summary {visibility：visible;}' –

非常酷，thx gaby。我的最後一個問題是，一旦縮略圖被徘徊，鏈接僅適用於文本，而不適用於整個縮略圖。我試圖用html來排序。但是，你可能只有使用CSS的解決方案。基本上在這種情況下，如何把文本相對於一個鏈接的塊。對不起，我便宜的代碼詞彙。 –

如何懸停使用CSS？

回答

相關問題