替代解决方案

Question

我要做的是：当用户将鼠标悬停在链接上时显示图片。

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

这就是我所做的：

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');
    }
);

请帮帮我。

Answer 1

您需要将 <div id="wrapper" class="clearfix">  <header id="header" class="full-header"> <div id="header-wrap"> <div class="container clearfix"> <div id="primary-menu-trigger"><i class="icon-reorder"></i></div>  <div id="logo"> <a href='/' data-no-turbolink class="standard-logo" data-dark-logo="<%= image_path("logo-ecocredits.png") %>"> <%= image_tag("logo-ecopractices.png", {:class=>"img-responsive"}) %> </a> <a href='/' data-no-turbolink class="retina-logo" data-dark-logo="<%= image_path("logo-ecocredits@2x.png") %>"> <%= image_tag("logo-ecocredits@2x.png", {:class=>"img-responsive"}) %> </a> </div>  <nav id="primary-menu"> <ul> <li class="how_it_works_load"><%= link_to 'HOW IT WORKS', controller: 'how_it_works' %></li> <li class="produce_tag_load"><%= link_to 'PRODUCE ECOTAGS', controller: 'produce_tags' %></li> <li class="buy_tag_load current"><%= link_to 'BUY ECOTAGS', controller: 'buy_tags' %></li> </ul> </nav> </div> </div> </header>  <% @producer.each do |new_val| -%> <section id="content"> <div class="content-wrap"> <div class="main-banner section parallax dark nobottommargin header-stick notopborder" style="background: url('<%= image_path("show-head.png") %>') no-repeat center center;background-size: cover;height: 250px;" data-stellar-background-ratio="0.3"> <div class="container clearfix"> <div class="buy-header"> <h2>ECOTAG CERTIFICATE - #<%= new_val.producer_id -%></h2> <p id="up25">This Ecotag is Available for Purchase</p> </div> </div> </div> <div class="container clearfix"> <div class="return-search"> <a href='/buy_tags/index' data-no-turbolink><i class="fa fa-angle-left"></i>  BACK TO SEARCH RESULTS</a> </div> <div class="row"> <div class="col-md-6"> <div class="summ-wrapper"> <div class="cert-logo"> <%= image_tag("cert-logo", {:class=>"img-responsive"}) %> </div> <div class="tag-count"> <%= new_val.quantity -%> <div class="tag-count-title"> certified Ecotags </div> </div> <div class="price"> price: <span class="green-text">$<%= new_val.value -%></span> </div> <div class="buy-btn"> <a href='mailto:jriediger@agsolver.com?subject="Purchase Ecotag#<%= new_val.value.to_i -%>"' data-no-turbolink><%= image_tag("buy-btn", {:class=>"img-responsive"}) %></a> </div> </div> </div> <div class="col-md-6"> <div class="overview"> <div class="table-responsive"> <table class="table"> <thead> <th class="black-text">Status</th> <th><span class="green-text">Available</span></th> </thead> <tr> <td class="black-text"><strong>State</strong></td> <td class="text-underline state_id" data-href="/buy_tags/index?state=<%= new_val.stateName -%>"><%= new_val.stateName -%></td> </tr> <tr> <td class="black-text"><strong>Practice</strong></td> <td class="text-underline sector_id" data-href="/buy_tags/index?sector=<%= new_val.practiceTypeName -%>"><%= new_val.practiceTypeName -%></td> </tr> <tr> <td class="black-text"><strong>Impact</strong></td> <td class="text-underline impact_id" data-href="/buy_tags/index?impact=<%= new_val.impact -%>"><%= new_val.impact -%></td> </tr>  </table> <br /> <table class="table"> <thead> <th style="color: #000;">Practice Change Details</th> </thead> </table> <table class="table new-table" style="margin-top:-10px;"> <thead> <th> </th> <th>Min</th> <th>Max</th> <th>Avg</th> <th>NH4</th> <th>NO3</th> </thead> <tr> <td style="color: #000;"><strong>N reduction</strong></td> <td>0</td> <td>0</td> <td><%= new_val.nreduction -%></td> <td>0</td> <td>0</td> </tr> <thead> <th> </th> <th>Min</th> <th>Max</th> <th>Avg</th> <th>NH4</th> <th>NO3</th> </thead> <tr> <td style="color: #000;"><strong>P reduction</strong></td> <td>0</td> <td>0</td> <td><%= new_val.preduction -%></td> <td>0</td> <td>0</td> </tr> </table> </div> </div> </div> </div> </div> <div class="section parallax dark" style="background: url('<%= image_path("data-bg.png") %>') no-repeat center center;background-size: cover;height: 650px;" data-stellar-background-ratio="0.3"> <div class="container clearfix"> <div class="buy-header"> <h2 style="font-size: 34px;"><span class="green-text">WHAT DOES THIS OFFSET?</span></h2> </div> <div class="row"> <div class="col-md-3"> <div class="pad-50-left"> <%= image_tag("car-icon", {:class=>"img-responsive"}) %> <br /> <div class="stats"> 2,400 </div> <br /> <div id="invest-divider"></div> <div class="small-stats"> car emissions offset </div> </div> </div> <div class="col-md-3"> <div class="pad-50-left"> <%= image_tag("food-icon", {:class=>"img-responsive"}) %> <br /> <div class="stats"> 500 </div> <br /> <div id="invest-divider"></div> <div class="small-stats"> more people fed per day </div> </div> </div> <div class="col-md-3"> <div class="pad-50-left"> <%= image_tag("cloud-icon", {:class=>"img-responsive"}) %> <br /> <div class="stats"> 56,000 </div> <br /> <div id="invest-divider"></div> <div class="small-stats"> kg if co<sup>2</sup> reduced </div> </div> </div> <div class="col-md-3"> <div class="pad-50-left"> <%= image_tag("people-icon", {:class=>"img-responsive"}) %> <br /> <div class="stats" style="margin-left:1px;"> 6<span style="font-size:26px; margin-top:-40px;"><i class="fa fa-plus"></i></span> </div> <br /> <div id="invest-divider"></div> <div class="small-stats"> months of avg. life expectancy </div> </div> </div> </div> </div> </div> <div class="container clearfix"> <h2 style="font-size: 34px;"><span class="green-text">WHAT ARE THE DIRECT EFFECTS</span></h2> <div id="invest-divider" style="border-color:#00b033;"></div> <br /> <br /> <div class="row"> <div class="col-md-5 field-img"> <div class="land-stats-container"> <% if new_val.image %> <% name = new_val.producer_id + '.PNG' %> <%= image_tag(name, {:class=>"img-responsive"}) %> <% else %> <%= image_tag("field", {:class=>"img-responsive"}) %> <% end %> <div class="land-stats-a"> acres: <span class="green-text"><%= new_val.acres -%></span> </div> <div class="land-stats-e"> Ecotags: <span class="green-text"><%= new_val.quantity -%></span> </div> </div> </div> <div class="col-md-7"> <p class="font22">This Ecotag directly offsets the eco-friendly practices of a specific food producer and helps to supplement the costs if the following good practices for sustainability: <br /> <hr style="border-color:#888;"> <div class="accordion-wrapper"> <div class="accordion-header1"> <span class="green-text arrow-down" style="font-size:30px;"><i class="fa fa-angle-down"></i></span> <span class="green-text arrow-up" style="font-size:30px;display:none;"><i class="fa fa-angle-up"></i></span> <span class="pad-25-left"><%= new_val.practiceTypeName -%></span> <span style="padding-left:15px; color:#999; font-size:30px;"><i class="fa fa-question-circle"></i></span> </div> </div> <hr style="border-color:#888;"> <div class="accordion-body1"> <p><%= @content_detail -%> </div> <div class="references"> <div class="ref-header"> references </div> <hr style="border-color:#666;"> <div class="ref-body"> <% if @ref_details %> <p><%= @ref_details.html_safe -%></p> <% end %> </div> </div> </div> </div> </div>  </section>  <% end %>  <footer id="footer" class="dark">  <div id="copyrights"> <div class="container clearfix"> <p class="center">Sustainability Partners © 2016, All Rights Reserved<br></p> </div> </div> </footer> </div>  <div id="gotoTop" class="icon-angle-up"></div> <script type="text/javascript"> $(".accordion-header1").click(function(){ $(".accordion-body1").slideToggle("slow"); $(".arrow-down").toggle(); $(".arrow-up").toggle(); }); $(".accordion-header2").click(function(){ $(".accordion-body2").slideToggle("slow"); $(".arrow2").toggleClass("fa.fa-angle-up"); $(".arrow-down2").toggle(); $(".arrow-up2").toggle(); }); </script> <script type="text/javascript"> jQuery(document).ready(function($) { $(".sector_id").mouseover(function(){ $(".sector_id").css({'cursor':'pointer'}); }); $(".sector_id").click(function() { window.document.location = $(this).data("href"); }); $(".state_id").mouseover(function(){ $(".state_id").css({'cursor':'pointer'}); }); $(".state_id").click(function() { window.document.location = $(this).data("href"); }); $(".impact_id").mouseover(function(){ $(".impact_id").css({'cursor':'pointer'}); }); $(".impact_id").click(function() { window.document.location = $(this).data("href"); }); }); </script> <script type="text/javascript"> jQuery(document).ready(function($) { $(".buy_tag_load a, .produce_tag_load a, .how_it_works_load a").click(function() { window.document.location = $(this).attr("href"); }); }); </script>事件添加到hover，如下所示。

li

Answer 2

你想要悬停一个隐藏的元素。这就是你的代码无效的原因。您无法在隐藏元素上触发事件。

$('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>

Answer 3

当我将鼠标悬停在链接上时，我想要做的是显示图像。

制作

PHAssetSourceTypeCloudShared

Answer 4

您只需要更改 Javascript :(在您的网站ul中，{class {1}}类使用它来定位nm中的特定li 。）

<强> HTML

ul

<强> CSS

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

<强>的javascript

.place-image{
    display:none;
}

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

Answer 5

问题：您无法在:hover

的元素上检测到display: none状态

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

$('.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>

Answer 6

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

将鼠标悬停在按钮上时显示图像

6 个答案:

替代解决方案