Question

我的问题是我想拥有一张我精确定位的图像，当我将图像悬停在图像上时会增长。我用.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

Answer 1

类要重复使用，而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/

Img：悬停不起作用

1 个答案: