当前位置： 文江博客话题详情

当图像和菜单项“标题”出现时，Jquery 会在悬停时更改图像彼此平等

发布于 2024-09-14 22:25:46 字数 3272 浏览 2 评论 0原文

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

我现在的问题是，每当我将鼠标悬停在所有列表项（如 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;
}

您可以查看开发站点在这里。

有人知道我的问题是什么吗？如果我不清楚，请告诉我。我尝试将 display:block 添加到 .imagefield 但它被 jquery 覆盖并且不会返回到 block。

原文

This is now solved. I simplified the code.

My problem now is that whenever I hover over all list items (shown below ul.menu) then hover over again, upon inspection style="display:none;" is not being removed after I come back to mouseover again.

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

The images that need to change when each menu item is moused over:

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

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

Does anyone have an idea of what my issue is? let me know if im not clear. I tried adding display:block to the .imagefield but it gets over wridden by the jquery and won't go back to block.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

你的心境我的脸 2024-09-21 22:25:46

请注意

，Jquery 允许您使用以下语法来定位元素值：
IMG[标题='某个值']

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

Give this a shot

note that Jquery allows you to locate element values using the following syntax:
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>
回复 原文
~没有更多了~

关于作者

朱染

暂无简介

0 文章
0 评论
21 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

qq_FjTq5B

文章 0 评论 0

18273202778

文章 0 评论 0

WordPress小学生

文章 0 评论 0

〃温暖了心ぐ

文章 0 评论 0

迷乱花海

文章 0 评论 0

niuniu

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文