当图像和菜单项“标题"彼此相等时，jQuery在悬停时更改图像 [英] Jquery change image on hover when image and menu item 'title' equal eachother
本文介绍了当图像和菜单项“标题"彼此相等时，jQuery在悬停时更改图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
现在解决了.我简化了代码.
This is now solved. I simplified the code.
现在的问题是，每当我将鼠标悬停在所有列表项上(显示在ul.menu下)，然后再次将鼠标悬停在检查时， style ="display:none;" 不会在我删除后再回到鼠标悬停.
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.
当前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>
更新的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.
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.
推荐答案
试一下
请注意，Jquery允许您使用以下语法查找元素值: IMG [title ='somevalue']
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>
这篇关于当图像和菜单项“标题"彼此相等时，jQuery在悬停时更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
