Question

现在已经解决了。我简化了代码。

我现在的问题是，每当我将鼠标悬停在所有列表项目上（如下所示ul.menu），然后再次将鼠标悬停在上面，检查 style =“display：none;”后我没有删除再次回到鼠标悬停。

当前的Html：

<ul class="menu">
 <li class="menu-mlid-187" id="ElDorado"><a title="El Dorado" href="/el-dorado">El Dorado</a></li>
 <li class="menu-mlid-202" id="TheGrand"><a title="The Grand" href="/grand">The Grand</a></li>
</ul>

每个菜单项被鼠标悬停时需要更改的图像：

<div id="bannerContainer">

  <div class="view-content">

   <div class="views-row views-row-1 views-row-odd views-row-first">     
        <span class="field-content">

             <a href="/el-dorado" class="imagefield imagefield-nodelink imagefield-field_image">
<img  class="imagefield imagefield-field_image equal" width="636" height="420" alt="" title="El Dorado" src="http://localhost:8888/sites/default/files/eldoradobanner.jpg" />
             </a>

       </span>
      </div>
     </div>

    <div class="views-row views-row-2 views-row-even views-row-last">       
         <span class="field-content">

             <a href="/grand" class="imagefield imagefield-nodelink imagefield-field_image">
<img  class="imagefield imagefield-field_image equal" width="636" height="420" alt="" title="The Grand" src="http://localhost:8888/sites/default/files/grandbanner.jpg" />
             </a>

       </span>
    </div>   

  </div>
<!-- default image -->
  <div id="upload">
   <img width="636" height="561" title='venues' src="http://localhost:8888/sites/default/files/venues_banner.jpg" alt="" class="imagefield imagefield-field_image">                     
</div>

</div>

更新了Jquery

// Dynamic mouse over menu item to display image utilizing titles
     $('#content .menu-block-3 ul.menu a').mouseover( function(){
         $("#bannerContainer #upload").fadeOut('fast'); 
        var sharedtitle = $(this).attr("title");        
        $('#bannerContainer img[title = "'+sharedtitle+'" ]').fadeIn('fast');   
    });
     $('#content .menu-block-3 ul.menu a').mouseout( function(){
         $("#bannerContainer #upload").fadeIn('fast'); 
        var sharedtitle = $(this).attr("title");
        $('#bannerContainer img[title = "'+sharedtitle+'" ]').fadeOut('fast');
    });

CSS：

/****** Venues Rollover navigation menu ******/
.view-ImageRollover {
    float:left;
    position:relative;
    top: 0;
}
.view-ImageRollover .view-content {  /* outer container */
    position: relative;
}
.view-ImageRollover .field-content img {  /* inner container */
    display: block!Important;
    float: left;
    margin: 0;
    padding: 0;
    position: absolute; 
    top: 0px;
}
/* default image */
#upload {
    float: left;
    z-index: 5;
    position: absolute;
}
#upload .imagefield-field_image img{
    left:0px;
    position: absolute;
}

You can see dev site here

有谁知道我的问题是什么？如果我不清楚，请告诉我。我尝试将display：block添加到.imagefield但是它被jquery转换为wridden并且不会再回到阻塞状态。

Answer 1

试一试

请注意，Jquery允许您使用以下语法定位元素值： IMG [标题= 'someValue中']

<html>
<head>
<script  src='jquery.min.js' ></script>


<script type="text/javascript"> 

 $(document).ready(function() { 

    $('ul.menu a').mouseover( function(){
        var sharedtitle = $(this).attr("title");
        $('#bannerContainer img[title = "'+sharedtitle+'" ]').addClass('equal');         
    });


    $('ul.menu a').mouseout( function(){
        var sharedtitle = $(this).attr("title");
        $('#bannerContainer img[title = "'+sharedtitle+'" ]').removeClass('equal');     });


}); 


</script>
</Head>
<body>


<ul class="menu"> 
 <li class="menu-mlid-187" id="ElDorado"><a title="El Dorado" href="/el-dorado">El Dorado</a></li> 
 <li class="menu-mlid-202" id="TheGrand"><a title="The Grand" href="/grand">The Grand</a></li> 
</ul> 


<div id="bannerContainer"> 

  <div class="view-content"> 

   <div class="views-row views-row-1 views-row-odd views-row-first">      
        <span class="field-content"> 

             <a href="/el-dorado" class="imagefield imagefield-nodelink imagefield-field_image"> 
<img  class="imagefield imagefield-field_image equal" width="636" height="420" alt="" title="El Dorado" src="http://www.google.com/images/srpr/nav_logo14.png" /> 
             </a> 

       </span> 
      </div> 
     </div> 

    <div class="views-row views-row-2 views-row-even views-row-last">        
         <span class="field-content"> 

             <a href="/grand" class="imagefield imagefield-nodelink imagefield-field_image"> 
<img  class="imagefield imagefield-field_image equal" width="636" height="420" alt="" title="The Grand" src="http://www.google.com/images/srpr/nav_logo14.png" /> 
             </a> 

       </span> 
    </div>    

  </div> 
<!-- default image --> 
  <div id="upload"> 
   <img width="636" height="561" title='venues' src="http://www.google.com/images/srpr/nav_logo14.png" alt="" class="imagefield imagefield-field_image">                      
</div> 

</div>
</body>
</html>

Jquery在悬停时更改图像，然后图像和菜单项“标题”彼此相等

1 个答案: