将鼠标悬停在文本上时使用JavaScript更改图像,将鼠标悬停在图像上时使用JavaScript更改文本
我有一段JavaScript代码,当您将鼠标悬停在相关的锚标记上时,它会更改图像的不透明度。我想知道如何让它也反过来工作?将鼠标悬停在图像上时更改定位标记 JavaScript将鼠标悬停在文本上时使用JavaScript更改图像,将鼠标悬停在图像上时使用JavaScript更改文本,javascript,css,Javascript,Css,我有一段JavaScript代码,当您将鼠标悬停在相关的锚标记上时,它会更改图像的不透明度。我想知道如何让它也反过来工作?将鼠标悬停在图像上时更改定位标记 JavaScript $('.link a').hover( function () { $('img.'+$(this).attr('class')).addClass('hovered'); }, function () { $('img.'+$(this).attr('class')).removeClass
$('.link a').hover(
function () {
$('img.'+$(this).attr('class')).addClass('hovered');
},
function () {
$('img.'+$(this).attr('class')).removeClass('hovered');
});
HTML
谢谢。请查看我的,如果您有任何问题,请告诉我
$('.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');
});
在这种情况下,您应该处理ID而不是类,以便获得通用解决方案,请看一看 HTML: CSS:
你到底想在这个锚定标记中更改什么?@KeluThatsall我将更改锚定标记文本的颜色。
.hovered {opacity: 1.0;}
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');
});
<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>
$('.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');
});
.hovered {opacity: 1.0; font-weight:bold;}
img {opacity: 0.5;}
img:hover {opacity: 1.0;}