【发布时间】：2011-03-31 18:19:29
【问题描述】：
现在已经解决了。我简化了代码。
我现在的问题是，每当我将鼠标悬停在所有列表项上（显示在 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 覆盖并且不会返回到块。
【问题讨论】：
-
ID 是
/grand，有斜线吗？ -
不清楚你在问什么。鼠标悬停时应该改变什么？
-
当我将鼠标悬停在 Grand 或 El Dorado 上时，我希望 field-content 更改图像。我应该说每个需要出现的锚点都有一个图像。 field-content 包含另外 1 张图片，其父 div 为 el-dorado
-
谁能帮忙。我想我需要将一个变量传递给一个函数，然后允许我添加 css。我是否正确，如果是，请在代码中描述如何。谢谢...
-
UI 不是 100% 确定您要更改的行为。这是我看到的行为：当页面加载时，1）我看到了默认图像。 （我们称之为default.gif）2）当我将鼠标悬停在“El Dorado”文本上时，我看到一个新横幅：（我们称之为ElDorado.gif）3）当我将鼠标移开“El Dorado”文本时，default.gif替换 ElDorado.gif。最后一部分是问题吗？您希望 ElDorado.gif 在鼠标移出时保持活动图像吗？
标签： jquery title conditional-statements