使用不同的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类对齐图像链接顶部的链接文本

回答

相关问题