如何展示 <p> 將ID懸停在 <img> 帶有ID

Question

HTML

<div>
  <div>
    <ul>
      <li><img src="ico/plaster.png" id="img-plaster" ><br>Plaster</li>
      <li>as above 2...</li>
      <li>as above 3...</li>
    </ul>
  </div>
</div>
<div>
  <div>
    <p id="plaster-nfo" style="display:none">plaster etc</p>
    <p>as above 2</p>
    <p>as above test 3 not hidden</p>
  </div>
</div>

CSS

#img-plaster:hover #plaster-nfo {
display: block;
}

當試圖將具有不同id的圖像懸停在上方時，我試圖顯示帶有id的文本的<p>行，當顯示該圖像所提示的主題時，此<p>將顯示更多信息。

如果我不應該使用css並使用jquery / javascript或其他，請告知，但它必須是移動友好的。

除了最后一個，我有幾個<p>都被隱藏（ display:none ），以確保<p>的位置正確。 但是，詳細的CSS代碼無法正常工作，因此我必須出錯或不適合該任務。

Answer 1

您可以這樣做：

 ul { list-style: none; padding: 0; margin: 0; } li { padding: 0; margin: 0; display: inline-block; position: relative; } li p { display: none; position: absolute; top: 0; background-color: #FFF; } li:hover p { display: block; } 

 <ul> <li> <img src="http://lorempixel.com/200/201/" alt="" /> <p>Text to show</p> </li> <li> <img src="http://lorempixel.com/200/199/" alt="" /> <p>Text to show</p> </li> <li> <img src="http://lorempixel.com/200/200/" alt="" /> <p>Text to show</p> </li> </ul> 

http://codepen.io/anon/pen/NqEXWE

移動友好，無需使用JavaScript即可實現：-)

Answer 2

Try this
$("#img-plaster").mouseover(function(){
        $("#plaster-nfo").show();
    });

Answer 3

如果您正在尋找懸停效果，請使用此

懸停jQuery

$( "#img-plaster" ).hover(
  function() {
    $('#plaster-nfo').show();
  }, function() {
    $('#plaster-nfo').hide();
  }
);

演示在這里：

 $(document).ready(function(){ $( "#img-plaster" ).hover( function() { $('#plaster-nfo').show(); }, function() { $('#plaster-nfo').hide(); } ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <div> <div> <ul> <li><img src="http://i.stack.imgur.com/ClUhe.jpg?s=32&g=1" id="img-plaster" ><br>Plaster</li> <li>as above 2...</li> <li>as above 3...</li> </ul> </div> </div> <div> <div> <p id="plaster-nfo" style="display:none">plaster etc</p> <p>as above 2</p> <p>as above test 3 not hidden</p> </div> </div> 

Answer 4

開張：

$("#img-plaster").mouseover(function(){
    $("#plaster-nfo").show();
});

並通過mouseout關閉：

$("#img-plaster").mouseout(function(){
    $("#plaster-nfo").hide();
});

祝你今天愉快 ：）