Css Img：悬停不工作_Css_Image_Hover

Css Img：悬停不工作

css image

Css Img：悬停不工作,css,image,hover,Css,Image,Hover,我的问题是我想要一个图像，我精确地定位了它，当我在上面悬停时，它会增长。我用了。名字：hover{..}但是没有发生什么事？有什么问题？这是我的代码： <html> <head> <body background="img/BG.jpg" </body> <title>NBA</title> <a href="SeiteInfos.html"> <h1 class="p">NBA-Info

我的问题是我想要一个图像，我精确地定位了它，当我在上面悬停时，它会增长。我用了。名字：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意味着唯一。因此，您可以考虑将它们转换为IDS，并将所有公共图像添加到一个类中，例如：Studio.< /P>，而不是拥有唯一的类。它们为该类定义一个悬停状态，以便覆盖所有团队映像的悬停状态。在您的情况下，您也可以使用pics img选择器

#pics img:hover {
    transform: scale(1.7);
    -ms-transform: scale(1.7);
    -webkit-transform: scale(1.7);

}

请看我在这里举的一个简单示例：

在悬停时，您希望哪个元素做出反应？您有“.p:hover”，它将应用于类为“p”的所有元素。你可能需要'p:hover'p工作正常，问题是图像pic_chicago，pic_Atlanta为什么在img上有z-index:-2？这会导致悬停问题吗？您的转换代码似乎工作正常。提琴。因为我想把它放在其他元素下面。这是问题所在。非常感谢：谢谢你的快速回复，但首先所有的课程都是div，它不起作用，所以我尝试了一些课程，共享类的想法也不起作用：我将类转换为div，并在一旁添加了一个传统类？例如，您可以定义一个hoverImage类。hoverImage:hover{scale1.7}。。。然后，在你放置的任何元素上，该元素将在悬停状态下缩放。。。你有很多可能性！：问题解决了：这是Z_索引：D，所以鼠标从来没有在图像上，而是在其他元素上将来，您可以通过右键单击图像并选择Inspect Element来检查这一点-它将显示鼠标在哪个元素上。