【问题标题】：Display image when hover over button将鼠标悬停在按钮上时显示图像
【发布时间】：2016-02-22 11:34:35
【问题描述】：

我正在尝试做的事情：当用户将鼠标悬停在链接上时显示图像。

我肯定犯了一些愚蠢的错误，但我不确定是哪个。

这就是我所做的：

HTML

<ul class="nm">
    <li><a href="#">Cork</a>
        <div class="place-image">
          <img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png">
        </div>
    </li>

  .......Remaining  li's.....
</ul>

CSS

.place-image{
    display:none;
}

div.place-image{
    width:326px;
    height:326px;  
}

javascript

$('.place-image').hover(
    function() {
        $('.place-image').fadeIn('slow');
    },function() {
        $('.place-image').fadeOut('slow');
    }
);

请帮帮我。

【问题讨论】：

不是问题，但为什么你的 CSS 有两个同一个类的条目？

标签： javascript jquery css

【解决方案1】：

您将鼠标悬停在隐藏元素上。这就是您的代码无法正常工作的原因。您不能在隐藏元素上触发事件。

$('a').hover(
    function() {
        $('.place-image').fadeIn('slow');
    },function() {
        $('.place-image').fadeOut('slow');
    }
);

.place-image{
    display:none;
}

div.place-image{
width:326px;
height:326px;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <a href="#">Cork</a>
  <div class="place-image"><img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div>
</li>

【讨论】：

感谢您的回复。但是，uploadpie.com/ehCC2 这就是正在发生的事情。可能如果你检查我的网站，你可能会弄清楚。再次感谢

【解决方案2】：

您需要将hover 事件添加到li，如下所示。

$('li').hover(
    function() {
        $(this).find('.place-image').fadeIn('slow');
    }, function() {
        $(this).find('.place-image').fadeOut('slow');
    });

【讨论】：

【解决方案3】：

当我将鼠标悬停在链接上时，我正在尝试显示图像。

做起来

<li>
  <a href="#">Cork</a>
  <div class="place-image"><img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div>
</li>


$('li a').hover(
    function() {
        $(this).next('.place-image img').fadeIn('slow');
    },function() {
        $(this).next('.place-image img').fadeOut('slow');
    }
);

【讨论】：

【解决方案4】：

问题：您无法在带有display: none 的元素上检测到:hover 状态

一种可能的解决方案可能是仅隐藏 img 本身，并根据需要在包装器 .place-image 或 a 或 li 上收听 :hover。请看下面的演示：

$('.place-image').hover(
    function() {
        $('img', this).fadeIn('slow');
    },function() {
        $('img', this).fadeOut('slow');
    }
);

.place-image{
    width:326px;
    height:326px;  
}

.place-image img {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <a href="#">Cork</a>
  <div class="place-image">
    <img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png">
   </div>
</li>

替代解决方案

根据您的情况，您也可以在没有 js 的情况下实现这一目标：

.place-image {
    width:326px;
    height:326px;  
}

img {
  opacity: 0;
  transition: opacity .4s ease;
  /*TODO: add crossbrowser prefixes*/
}

li:hover img{
  opacity: 1;
}

<ul>
<li>
  <a href="#">Cork</a>
  <div class="place-image">
    <img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png">
   </div>
</li>
</ul>

【讨论】：

感谢您的回复。这正是我想要做的。但是，uploadpie.com/ehCC2 这就是正在发生的事情。
还是和截图一样的问题

【解决方案5】：

你只需要改变你的Javascript:(在你的网站ul有类nm使用它来定位ul中的特定li。)

HTML

<li>
  <a href="#">Cork</a>
  <div class="place-image"><img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div>
</li>

CSS

.place-image{
    display:none;
}

div.place-image{
width:326px;
height:326px;  
}

javascript

$( "ul.nm > li" ).
   $('li').hover(
      function() {
          $(this).find('.place-image').fadeIn('slow');
        }, function() {
          $(this).find('.place-image').fadeOut('slow');
    });

【讨论】：

在您的项目中，您在哪里编写 javascript 代码。文件名。
它在一个自定义的 js 文件中。实际上它的wordpress网站。像这样uploadpie.com/Me6Jc

【解决方案6】：

$('a').hover(
    function() {
        $('.place-image').fadeIn('slow');
    },function() {
        $('.place-image').fadeOut('slow');
    }
);

.place-image{
    display:none;
}

div.place-image{
width:326px;
height:326px;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <a href="#">Cork</a>
  <div class="place-image"><img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div>
</li>

【讨论】：