圖片：懸停不起作用

我的問題是我想要一個圖像，我準確地定位，當我徘徊時它會增長。我用.name做了：hover {..}但是發生了nohing？問題是什麼？這裏我的代碼：圖片：懸停不起作用

<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

來源

2013-12-10 user3071985

你想徘徊的時候反應是什麼元素？你有'.p：懸停'，這將適用於所有類'p'的元素。你可能需要'p：hover' – Gotschi

P工作正常，問題是圖像「pic_chicago，pic_Atlanta」 – user3071985

爲什麼你有z-index：-2在img上？這可能導致懸停問題？你轉換代碼似乎工作正常。小提琴[here]（http://jsfiddle.net/RnqU9/）。 – Poornima

類是爲了重複使用，和IDS是爲了是唯一的。因此，您可以考慮將其切換爲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/

來源

2013-12-10 19:03:04 Shomz

感謝您的快速回復，但首先所有的類都是div，它沒有工作，所以我嘗試了類，而共享類的想法isn也沒有任何工作：我將課程轉換爲div，並將課程添加到旁邊。 – user3071985

看到這裏：http://jsfiddle.net/DsQq6/1/你知道你可以有你想要的班級嗎？因此，例如，您可以定義一個'hoverImage'類。 '.hoverImage：hover {scale（1.7）}'......然後，無論您放置什麼元素，該元素都會在懸停時縮放......您擁有充足的可能性！ :) – Shomz

問題解決：它是Z_INDEX：D 感謝 – user3071985

圖片：懸停不起作用

回答

相關問題