在圖像上方出現了一個小圖標

我正坐在那裏玩耍，當你將鼠標放在圖像上時，圖像上會出現一個小圖標。我試着這樣做：在圖像上方出現了一個小圖標

HTML：

<figure> 
<div class="lukIMG"> 
<img src="/indhold/img/intet-nyhed-img/intet-img2.png" alt="fejl" style="width:339px;"> 
<img src="/indhold/img/sog/sog.png" class="iconIMG"> 
<p><?php echo date("d-m-Y", strtotime($dag));;?></p> 
</div> 
</figure>

CSS：

.lukIMG { 
    position: relative; 
} 
.lukIMG p { 
    position:absolute; 
    bottom: -4px; 
    right: 1px; 
    padding: 5px 10px; 
    background-color: #002855; 
    color: #FFF; 

    -webkit-border-top-left-radius: 5px; 
    -moz-border-radius-topleft: 5px; 
    border-top-left-radius: 5px; 
} 
.lukIMG .iconIMG { position: absolute; display: none; }

EIDT HTML和CSS：

HTML

<div class="lukIMG"> 
    <img src="/indhold/img/intet-nyhed-img/intet-img2.png" alt="fejl" style="width:339px;" class="cl1"> 
    <img src="/indhold/img/sog/loading.gif" class="cl2" width="25px;" height="25px;"> 
    <p>dato</p> 
</div>

CSS

.lukIMG { 
    position: relative; 
} 
.lukIMG p { 
    position:absolute; 
    bottom: -4px; 
    right: 1px; 
    padding: 5px 10px; 
    background-color: #002855; 
    color: #FFF; 

    -webkit-border-top-left-radius: 5px; 
    -moz-border-radius-topleft: 5px; 
    border-top-left-radius: 5px; 
} 
.cl1:hover+img 
{ 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:3; 
} 
.cl1 
{ 
    z-index:2; 
} 
.cl2 
{ 
    z-index:1; 
}

來源

2013-11-04 Jesper Petersen

那麼是什麼問題？ – Radian

@Radian問題是，它的圖標沒有出現。 –

檢查我在答案中給出的小提琴。 –

檢查DEMO或下面的代碼：

<html> 
    <head> 
     <script> 
     </script> 

     <style> 
      img 
      { 
       position:absolute; 
      } 
      img.cl1:hover+img 
      { 
       position:relative; 
       left:0; 
       top:0; 
       z-index:3; 
      } 
      img.cl1 
      { 
       z-index:2; 
      } 
      img.cl2 
      { 
       z-index:1; 
      } 
     </style> 
    </head> 
    <body> 
     <img src="1.jpg" width=200 height=200 class="cl1"/> 
     <img src='2.gif' class="cl2"/> 
    </body> 
</html>

來源

2013-11-04 12:55:13

這應該是工作，請測試：

.lukIMG .iconIMG:hover { position: absolute; display: block; z-index:999}

的代碼添加到您的css文件

來源

2013-11-04 12:23:35 Radian

http://billedeupload.dk/?v=dmW2O.png 圖像沒有在圖像上，因爲它應該知道@radian –

更好的方法是使用一個圖像作爲背景圖像，第二個用於形成，爲更多的幫助，請讓jsfiddle – Radian

謝謝:)和她：http://jsfiddle.net/by7mM/ –

在圖像上方出現了一個小圖標

回答

相關問題