[英]Hover on one element causes hovering effect on other element with jQuery
当我将鼠标悬停在元素上时,我必须创建边界效果,反之亦然。
我设法做到了,但问题是,每当我将鼠标悬停在其中一个元素上时,我就会取消悬停在我悬停的元素上的悬停效果。
当我将鼠标悬停在id =“12345img”时获取边框并且id =“12345a”获得颜色效果。 当我这样做时,反之亦然它也有效,但只是我第一次在它上面盘旋。
这是代码。
<script type="text/javascript">
$(document).ready(function () {
$('.portfolioProject a').hover(function () {
var idElement = this.id;
$("#" + idElement.replace('a', '') + "img").css('border', '2px solid #cdfc5d');
$("#" + idElement + "a").css('color', '#cdfc5d');
});
$('.portfolioProject a').mouseleave(function () {
var idElement = this.id
$("#" + idElement.replace('a', '') + "img").css('border', 'none');
$("#" + idElement + "a").css('color', 'white');
});
$('.portfolioImage img').hover(function () {
var idElement = this.id;
$("#" + idElement.replace('img', '') + "a").css('color', '#cdfc5d');
$("#" + idElement + "img").css('border', '2px solid #cdfc5d');
});
$('.portfolioImage img').mouseleave(function () {
var idElement = this.id
$("#" + idElement.replace('img', '') + "a").css('color', 'white');
$("#" + idElement + "img").css('border', 'none');
});
});
</script>
我的问题是如何修复它以使其每次都有效。
当你将鼠标悬停在某个链接上时,你想要这样吗?当你从链接鼠标移出时,你应该删除图像的边框吗?
此外,当您将鼠标悬停在图像上时,链接应该变为彩色,当您将鼠标移出图像时,链接应该恢复为原始颜色?
如果这是要求,此代码可能会有所帮助:
$(document).ready(function () {
$('.portfolioProject a').hover(
function ()
{
var idElement = this.id;
$("#" + idElement.replace('a', '') + "img").css('border', '2px solid #cdfc5d');
$("#" + idElement + "a").css('color', '#cdfc5d');
},
function()
{
var idElement = this.id;
$("#" + idElement.replace('a', '') + "img").css('border', 'none');
$("#" + idElement + "a").css('color', 'white');
}
);
$('.portfolioImage img').hover(
function ()
{
var idElement = this.id;
$("#" + idElement.replace('img', '') + "a").css('color', '#cdfc5d');
$("#" + idElement + "img").css('border', '2px solid #cdfc5d');
},
function()
{
var idElement = this.id
$("#" + idElement.replace('img', '') + "a").css('color', 'blue');
$("#" + idElement + "img").css('border', 'none');
}
);
});
看看小提琴: http : //jsfiddle.net/B47Gu/
我修改了小提琴,这是否符合你的目的: http : //jsfiddle.net/B47Gu/3/
我认为你必须为鼠标悬停效果创建CSS类,然后你只需要在事件上切换类:
jQuery的:
$(document).ready(function () {
$(".portfolioImageWrapper").on('mouseenter mouseleave', ".img", function () {
$(this).toggleClass('imgHover');
$("#" + (this.id).replace('img', '') + "a").toggleClass('imgHover');
});
});
HTML:
<div class='portfolioProject'>
<ul>
<h2>
<li>
<a id='7a' href='#'> Link1</a>
</li>
</h2>
<h2>
<li>
<a id='8a' href='#'> Link 2 </a>
</li>
</h2>
</ul>
</div>
<div class='portfolioImageWrapper'>
<div class='portfolioImage'><a href='#'><img class="img" src='#' alt='Image1' title='Image 1' id='7img' /></a></div><div class='portfolioImage'><a href='#'><img class="img" src='#' alt='Image 2' title='Image2' id='8img' /></a></div></div>
CSS:
.imgHover
{
border-style: dotted;
border-width: 1px;
color: red;
text-decoration: none;
}
您可以确保将不同的css类切换到链接。 只需在jquery代码中修改它(在toggleClass函数中)并将类添加到css部分
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.