Question

我想要在悬停另一个元素后显示div。他们不在同一个div中。弹出信息应显示何时悬停类.option_36_124的图标

$(".option_36_124").hover(function() {
  $('.poupinfo').show();
}, function() {
  $('.poupinfo').hide();
});

.poupinfo {
  background: black;
  color: white;
  top: 250px;
  right: 527px;
  position: absolute;
  padding: 10px;
  width: 250px;
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="product_info"><i class="fa fa-info-circle option_36_124"></i></span>

Answer 1

$( document ).ready(function() {
$(".option_36_124").hover(function(){
    $('.poupinfo').show();
},function(){
    $('.poupinfo').hide();
});
});

在这里得到答案。

Answer 2

您的HTML结构需要进行一些返工（因此图标和内容不是与父子相关的，而是兄弟姐妹，使图标始终可见并且不依赖于内容），并且您还定位了.show（）和.hide（）到一个错误的（不存在的）类。希望这会有所帮助：

$(".option_36_124").hover(function(){
    $('.product_info').show();
},function(){
    $('.product_info').hide();
});

 .product_info{
    background: black;
    color: white;
    top: 150px;
    right: 527px;
    position: absolute;
    padding: 10px;
    width: 250px;
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<i class="fa fa-info-circle option_36_124">icon (hover me)</i>
<span class="product_info">content</span>

Answer 3

这是下面的工作检查代码

$(".option_36_124").hover(function() {
  $('.poupinfo').show();
}, function() {
  $('.poupinfo').hide();
});

.poupinfo {
  background: black;
  color: white;
  top: 250px;
  right: 527px;
  position: absolute;
  padding: 10px;
  width: 250px;
  display: none;
  text-align: right;
  top:25px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="product_info"><i class="fa fa-info-circle option_36_124"></i></span>

<div class="poupinfo">Hii! i am visible now </div>

Answer 4

不使用jQuery或任何脚本，对我来说，我更喜欢使用:pseudo元素，:hover和:after的组合可以为您提供所需的结果，以及你没有使用任何脚本的好东西！

Pure CSS3只是：）

   .fa-info-circle:hover::after {
      content: 'hey im popup info!';
      background: black;
      color: white;
      position: absolute;
      padding: 10px;
      width: 250px;
      left: 30px;
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="product_info"><i class="fa fa-info-circle option_36_124"></i></span>

Jquery显示/隐藏它为什么不起作用？

4 个答案: