使用不同的CSS類對齊圖像鏈接頂部的鏈接文本

因此，我正在做母親的小型企業網站，以節省她的錢和在過程中學習相當多的CSS。雖然我有一個小問題，我正在製作一個鏈接到2個不同頁面的圖庫頁面，我想要在每個圖像（展廳和舞臺）旁邊坐的http://area25dallas.com/s/gallery.htm的文本（我也知道圖像是相同的，等待更多的媽媽）。我希望這些在最上面，但是當我添加一個a{}到下面的CSS來控制圖片翻轉效果時，它將我網站上的所有其他鏈接搞砸了。使用不同的CSS類對齊圖像鏈接頂部的鏈接文本

.imagedropshadow { 
margin:30px; 
padding: 10px; 
border: solid 1px #EFEFEF; 
} 

a:hover img.imagedropshadow { 
border: solid 1px #CCC; 
-moz-box-shadow: 1px 1px 10px #999; 
-webkit-box-shadow: 1px 1px 10px #999; 
    box-shadow: 1px 1px 10px #999; 
}

有沒有一種辦法可以讓一個a{}和具體a:hover{}這些鏈接和圖像不搞亂網站了整個CSS？謝謝

來源

2012-03-27 OnTheRidge

要爲特定的元素創建CSS的ID有幾種方法可以採取：

創建爲元素的特定類。 <a class="image-link"></a>

 
    a.image-link{ 
     //styles go here 
    }

你可以參考鏈接的獨特背景。例如，如果它位於ID爲content的div內。 <div id="content"><a></a></div>

 
    #content a{ 
     //styles go here 
    }

，或者如果它是唯一a，可以是直接在p元素中<p><a></a></p>

 
    p > a{ 
     //styles go here 
    }

當添加樣式到HTML它往往是不錯的考慮CSS的範圍。請注意，您可以爲元素多次聲明樣式。所以你可以在你的HTML和CSS中爲每個a元素在特定範圍內爲a元素製作CSS。

更多關於CSS選擇：

來源

2012-03-27 20:13:45

你試過這段代碼嗎？

img.imagedropshadow:hover { 
border: solid 1px #CCC; 
-moz-box-shadow: 1px 1px 10px #999; 
-webkit-box-shadow: 1px 1px 10px #999; 
    box-shadow: 1px 1px 10px #999; 
}

來源

2012-03-27 19:54:43

#content .imagedropshadow { 
margin:30px; 
padding: 10px; 
border: solid 1px #EFEFEF; 
} 

#content a{ 
} 

#content a:hover img.imagedropshadow { 
border: solid 1px #CCC; 
-moz-box-shadow: 1px 1px 10px #999; 
-webkit-box-shadow: 1px 1px 10px #999; 
    box-shadow: 1px 1px 10px #999; 
}

理想情況下，你應該把您的圖片，一個div類或ID，並使用該ID /類值選擇錨需要（一{}）標籤。我拿起容器DIV

來源

2012-03-27 19:56:11 redDevil

啊我明白了！我仍然無法將文字置於圖像的頂部，但我確信我可以通過一些google'ing來解決這個問題，謝謝！ – OnTheRidge 2012-03-27 21:10:09

請記住，當你正在你的選擇真的很具體，比如＃內容。 myDiv a.link而不是#Content a.link，更多的指定ic推翻了不那麼具體。

只是一個提示

來源

2012-03-27 20:44:03 pep

使用不同的CSS類對齊圖像鏈接頂部的鏈接文本

回答

相關問題