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 - 如何在鼠標懸停上增長/縮小圖像

回答

相關問題