Fatal编程技术网
  • jquery/
  • 当图像和菜单项“title”相等时，Jquery在悬停状态下更改图像

当图像和菜单项“title”相等时，Jquery在悬停状态下更改图像

jquery

当图像和菜单项“title”相等时，Jquery在悬停状态下更改图像,jquery,title,conditional-statements,Jquery,Title,Conditional Statements,这个问题现在已经解决了。我简化了代码 我现在的问题是，每当我将鼠标悬停在ul.menu下面显示的所有列表项上时，然后再次将鼠标悬停在上面，检查样式=显示：无；在我再次回到鼠标上方后，不会被移除 当前Html： <ul class="menu"> <li class="menu-mlid-187" id="ElDorado"><a title="El Dorado" href="/el-dorado">El Dorado</a></li>

这个问题现在已经解决了。我简化了代码

我现在的问题是，每当我将鼠标悬停在ul.menu下面显示的所有列表项上时，然后再次将鼠标悬停在上面，检查样式=显示：无；在我再次回到鼠标上方后，不会被移除

当前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>
CSS:

有人知道我的问题是什么吗？如果我不清楚，请告诉我。我尝试将display:block添加到.imagefield中，但jquery将其改写，无法返回到block。

尝试一下

请注意，Jquery允许您使用以下语法定位元素值： IMG[title='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>
ID是/grand，上面有斜线？不清楚你在问什么。鼠标悬停在什么位置时应该更改什么？当我鼠标悬停在Grand或El Dorado上时，我希望字段内容更改图像。我应该说，每个锚都有一个需要出现的图像。字段内容包含1个以上的图像，其父分区为el doradoCan。任何人请提供帮助。我想我需要把一个变量传递给一个函数，这个函数允许我添加css。我是否正确，如果是，请描述如何在代码中。谢谢…我不是100%确定你想改变什么行为。下面是我看到的行为：当页面加载时，我看到默认图像。当我将鼠标移到El Dorado文本上时，我们称之为default.gif 2。我看到一个新的横幅：当我将鼠标移离El Dorado文本时，我们称之为ElDorado.gif 3。default.gif将替换ElDorado.gif。最后一部分是问题吗？当鼠标移出时，是否希望ElDorado.gif保留活动图像？噢，谢谢！你是一个活生生的储蓄者！我几乎在正确的轨道上，但你击中了正确的位置。谢谢你，布莱恩！不幸的是，当我将鼠标移到所有元素上，然后再次回来查看它们时，遇到了一个问题。检查后，jquery会在鼠标离开后立即添加display:none。我想它切换显示：无后，我循环通过撒谎者你使用的代码张贴或一个变种？如果您进行了更改，请发布您正在使用的代码。[编辑原始问题]我的回答中的代码与display属性无关。我遇到了一个奇怪的问题。它似乎在开发服务器上工作，但在我的本地mamp上，它的行为与我上面所说的一样。请在您的机器上发布所有这些。服务器的位置/位置应该无关紧要。 
// 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');
    });

/****** 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;
}

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