jquery - 如何在鼠标悬停上增长/缩小图像

我在页面上有两个圆圈，如果我将鼠标悬停在circle1上，右边第二个圆圈（circle2）放大。我正在尝试使用jquery让circle2做同样的事情，但是两个圆形闪光灯和circle2都被误放了。jquery - 如何在鼠标悬停上增长/缩小图像

下面是HTML我到目前为止

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<link rel="stylesheet" type="text/css" href="practice.css"> 
<title>Practice</title> 
</head> 

<body> 
<div class="container"> 
    <div class="circle1" id="circle1"></div> 
    <div class="circle2" onmouseover="growCircle()" onmouseout="shrinkCircle()"></div> 
</div> 

<script> 
function growCircle() { 
     document.getElementById("circle1").className = "circleBig"; 
} 
function shrinkCircle() { 
     document.getElementById("circle1").className = "circle1"; 
} 
</script> 
</body> 
</html>

这是我的CSS

.body { 
    margin: 0; 
    padding: 0; 
} 

.container { 
    width: 80%; 
    margin: 0px auto; 
    height: 500px; 
    background:#CC0000; 
    display:block; 
} 

.circle1 { 
    width: 300px; 
    height: 300px; 
    border-radius: 50%; 
    background: #dadada; 
/* position: absolute; */ 
/* top: 50%; */ 
/* left: 30%; */ 
/*  margin-right: -50%; */ 
/*  transform: translate(-50%, -50%); */ 
    float:left; 
} 

.circle1:hover + .circle2 { 
    width: 500px; 
    height: 500px; 
    } 

/* .circle2 { 
    width: 300px; 
    height: 300px; 
    border-radius: 50%; 
    background: #000000; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    float: right; 
    transform: translate(-50%, -50%); 
    } */ 

.circle2 { 
    width: 300px; 
    height: 300px; 
    border-radius: 50%; 
    background: #dadada; 
/* position: absolute; */ 
/* top: 50%; */ 
/* left: 30%; */ 
/*  margin-right: -50%; */ 
/*  transform: translate(-50%, -50%); */ 
    float:right; 
} 

.circleBig { 
    width: 500px; 
    height: 500px; 
    border-radius: 50%; 
    background: #dadada; 
    }

来源

2014-09-05 Kornie

因为你只改变一个圈，事件处理只影响到其他圈子<div class="circle1" id="circle1"></div> 。还要注意这是一个元素，而不是图像。要使用事件处理程序所在的元素，您需要传递参数this。并在功能中使用它。像这样：

<div id="circle1" class="circle1" onmouseover="growCircle(this)" onmouseout="shrinkCircle(this)"></div>

和JavaScript函数是简单的：

function growCircle(ele) { 
    ele.className = "circleBig"; 
} 
function shrinkCircle(ele) { 
    ele.className = "circle1"; 
}

下面是对这些变化的预览：看看this fiddle.

现在为什么它似乎移出原因到右侧是因为它在左上角而不是中心处发生变化。你只需要将元素移动一点以弥补这一点（向右100像素，向下100像素，或者另一种方式取决于你如何看待它），所以你需要添加下面的CSS到circleBig类别：

.circleBig { 
    .... 
    position:relative; 
    right: 100px; 
    bottom: 100px; 
    .... 
}

而且我们有我们想要的。

Here is the final result

为了有一个元素会影响其他元素（不只是本身），我们可以修改JavaScript是像这样：

function growCircle(ele) { 
    document.getElementById(ele).className = "circleBig"; 
} 
function shrinkCircle(ele) { 
    document.getElementById(ele).className = "circle1"; 
}

那么你可以传递的是什么，你的ID想要改变，通过"circle1"更改元素的大小与IDcircle1。

来源

2014-09-05 00:23:59

我认为这很简单。只需加上

.circleBig { 
    width: 500px; 
    height: 500px; 
    border-radius: 50%; 
    background: #dadada; 
    float:left; 
    }

来源

2014-09-05 00:34:17 sidj9n

jquery - 如何在鼠标悬停上增长/缩小图像

回答

相关问题