我的问题是我想要一个我精确定位的图像，当我将鼠标悬停在它上面时它会增长。我是用 .name:hover{..} 做的，但是什么都没发生？问题是什么 ？ 这是我的代码:
<html>
<head>
<body background="img/BG.jpg" </body>
<title>NBA</title>
<a href="SeiteInfos.html"> <h1 class="p">NBA-Infos</h1> </a>
<style type="text/css">
h1{text-align:center;
color:orange;
Border: 3px solid green;
margin:10px 600px;
Border-radius:10px;}
#text1{text-align:center;
color:#E0F2F7;
font-family:Algerian;
font-size:20px;}
#seite2{color:#0066CC; font-size :15px; text-align: bottom-right;}
.p:hover {
position: relative;
top: -3px;
left: -3px;
text-shadow: 1px 1px #E76F1A,
2px 2px #E76F1A,
3px 3px #E76F1A,
4px 4px #E76F1A,
5px 5px #E76F1A,
6px 6px #E76F1A}
#ho{width:20px; height: 60px;
color: red;}
img[class*="pic_"]{position:absolute;
z-index:-2;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;}
.pic_chicago{left:735px;
top:247px;}
.pic_Atlanta{top:474px;
left:950px; }
.pic_Atlanta:hover{transform: scale(1.7);
-ms-transform: scale(1.7); /* IE 9 */
-webkit-transform: scale(1.7); /* Safari and Chrome */}
</style>
</head>
<p id="text1">Auf die Überschrift klicken um auf die Infoseite zu gelangen. Auf die verschiedenen Staaten klicken, um auf die offizielle Teamseite zu gelangen.</p>
<p id="seite2"><a href="MyHomepage2.html">Hier kommt ihr zur nächsten Seite!</p></a>
<div id="ho"> </div>
<div id="pics">
<img src="img/chicago.png" class="pic_chicago"/>
<img src="img/Atlanta-Hawks.png" class="pic_Atlanta" />
谢谢你的帮助:D
最佳答案
类是用来重复使用的，id 是唯一的。因此，与其拥有独特的类，不如考虑将它们切换为 ID，并将所有常见图像添加到一个类中(例如:team)。
他们为该类定义了一个悬停状态，以覆盖所有团队图像的悬停状态。在您的情况下，您还可以使用 #pics img 选择器。
#pics img:hover {
transform: scale(1.7);
-ms-transform: scale(1.7);
-webkit-transform: scale(1.7);
看我在这里做的一个简单例子:http://jsfiddle.net/DsQq6/
关于css - 图片 :hover not working，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20502921/