Question

我在页面上有两个圆圈，如果我将鼠标悬停在圆圈1上，则右边的第二个圆圈（圆圈2）会放大。我正在尝试使用jquery让circle2做同样的事情，但是两个圆圈闪烁而圆圈2放错了地方。

这是我到目前为止的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;
    }

Answer 1

由于您只更改了一个圈子，因此事件处理程序仅影响另一个圈子<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"更改元素的大小 id circle1

Answer 2

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

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

jquery - 如何在鼠标悬停时增大/缩小图像

2 个答案: