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的<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

如果您正在寻找悬停效果，请使用此

<强> hover 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();
});

度过愉快的一天：）

当鼠标悬停在带有id的<img/>上时，如何通过id显示<p>

4 个答案: