使用 JavaScript 在将鼠标悬停在文本上时更改图像,在将鼠标悬停在图像上时更改文本
Use JavaScript to change image when hovering over text, and change text when hovering over image
我有这个JavaScript代码,当你将鼠标悬停在相关的锚标签上时,它会改变图像的不透明度。我想知道如何让它也反向工作?将鼠标悬停在图像上时更改锚标记。
http://jsfiddle.net/7EzuS/8/
JavaScript
$('.link a').hover(
function () {
$('img.'+$(this).attr('class')).addClass('hovered');
},
function () {
$('img.'+$(this).attr('class')).removeClass('hovered');
});
.HTML
<ul>
<li><div class="link"><a href="#" class="link_a">Link A</a></div></li>
<li><div class="link"><a href="#" class="link_b">Link B</a></div></li>
<li><a href="#"><img class="link_a" src="http://somthing.jpg" /></a></li>
<li><a href="#"><img class="link_b" src="http://somthing.jpg" /></a></li>
</ul>
.CSS
.hovered {opacity: 1.0;}
img {opacity: 0.5;}
img:hover {opacity: 1.0;}
谢谢。
在这种情况下,
你应该处理ids而不是类,以便有一个通用的解决方案,看看这里
.HTML:
<ul>
<li><div class="link"><a href="#" id="link_a" class="hoverLink">Link A</a></div></li>
<li><div class="link"><a href="#" id="link_b" class="hoverLink">Link B</a></div></li>
<li><a href="#"><img id="link_a_img" class="hoverImg" src="http://images.apple.com/support/ipod/images/do_not_disconnect_icon.gif" /></a></li>
<li><a href="#"><img id="link_b_img" class="hoverImg" src="http://atlanta.braves.mlb.com/images/global/alert_icon.gif" /></a></li>
</ul>
.JS:
$('.link a').hover(
function () {
$('#' + $(this).attr('id') + '_img').addClass('hovered');
},
function () {
$('#' + $(this).attr('id') + '_img').removeClass('hovered');
});
$('img.hoverImg').hover(
function () {
var idParts = $(this).attr('id').split('_');
var id = idParts[0] + "_" + idParts[1];
$('#' + id).addClass('hovered');
},
function () {
var idParts = $(this).attr('id').split('_');
var id = idParts[0] + "_" + idParts[1];
$('#' + id).removeClass('hovered');
});
.CSS:
.hovered {opacity: 1.0; font-weight:bold;}
img {opacity: 0.5;}
img:hover {opacity: 1.0;}
看看我的例子,如果你有任何问题,请告诉我。
$('.link a').hover(
function () {
$('img.'+$(this).attr('class')).addClass('hovered');
},
function () {
$('img.'+$(this).attr('class')).removeClass('hovered');
});
$('img.link_a').hover(
function () {
$('a.link_a').addClass('hovered');
},
function () {
$('a.link_a').removeClass('hovered');
});
$('img.link_b').hover(
function () {
$('a.link_b').addClass('hovered');
},
function () {
$('a.link_b').removeClass('hovered');
});
相关文章:
- 将HTML表格导出到带有文本和图像的excel中
- 可单击滚动图像以显示文本框
- 正确输入的文本会更改图像
- 无法将包含文本和图像的SVG保存到画布
- 如何知道锚在文本或图像上
- 自动缩放图像以匹配文本高度
- 一个javascript实现base64图像编码并将结果写入文本文件
- 有人知道有没有jquery插件可以在图像上写文本,并让用户将其放置在图像内的任何位置
- jQuery对请求图像的外部文本进行查询
- 如何检测移动浏览器(PHP/Javascript),然后进行图像/文本更改
- ASP.NET网页-使用脚本显示由预定义日期和时间指定的图像/文本
- 合并 2 个 javascript/jquery 随机横幅图像/文本函数彼此对应
- 使用javascript在html中制作一个随机的图像/文本/url元素
- 将彩色带置于图像/标签+图像/文本对齐方式之上->JavaScript Titanium移动应用程序
- 将2D画布(图像+文本)应用于3D表面,并进行360度旋转/动画-可以使用HTML5/CSS3/Javascript或F
- 覆盖HTML 5输入类型文件,相机与图像/文本从HTML网页
- 脚本标记中的Paperclip图像集显示的是图像文本url,而不是图像-expandablebanners.js
- 图像文本上的代码后面
- 电子邮件中包含图像/文本/插图的HTML滑块
- 如何从不同的媒体子集创建视频,如图像/文本等