"mouseover"가 동일한 div에서 trigged되었을 때 div 색상을 변경하는 방법은 무엇입니까? 순수 JS는

var changeDiv = document.getElementsByClassName("run")[0]; 
 

 
function changeColor(style) { 
 

 
    var colors = ["green", "blue", "yellow"]; 
 
    for (var i = 0; i < colors.length; i++) { 
 
    style.style.backgroundColor = colors[i]; 
 
    break; 
 
    } 
 
} 
 

 
changeDiv.addEventListener("mouseover", function() { 
 
    changeColor(this); 
 
}, false);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <div class="run"> 
 

 
    e3reerghdhf </b> 
 

 
    djdhfdgfdgdhhghgd 
 
    </div> 
 
</body> 
 

 
</html>

나는 하나 개의 색상을 변경하려면 내가 사업부 위에 마우스를 올려과 색상 내가 가져, 매번 또는 (마우스 오버)를 변경하고 싶습니다. 아마도 windowSessionStorage를 사용하여 인덱스를 보유하고 이벤트가 트리거되면 값을 변경해야한다고 생각했습니다.

출처

2017-09-15 george

은 무엇을 어떻게 하시겠습니까? 호버링 중에 만 색상을 변경하고 다시 돌아가고 싶습니까? –

어쩌면 파란색으로 바뀌지 않으며 다시 가져 가면 새 색상으로 바뀌어야합니다. 그리고 다시 원래의 CSS 색깔로 돌아가는 것 – george

당신의 html에서 그 무작위'<\b>'태그는 무엇입니까? –

Javascript를 사용하여 해당 동작을 명확하게 구현할 수 있지만 기본 CSS 한 줄을 사용하여 쉽게 수행 할 수있는 기능을 구현하려는 이유는 무엇입니까? 색상의 목록을 사용하여 각 롤오버에 색상 변경 :

~~.run:hover{ background-color:red;}~~

편집 할 수 있습니다. 당신은 배열과 인덱스 포인터를 사용하여 포인터를 이벤트가 트리거 될 때마다 증가 할 수 있습니다

https://jsfiddle.net/ydrr0xn8/

var changeDiv = document.getElementsByClassName("run")[0]; 
 

 
changeDiv.addEventListener("mouseover", function() { 
 
    var colors = ['red', 'green', 'blue']; 
 
    var index = colors.indexOf(changeDiv.style.backgroundColor) + 1; 
 
    if (index >= colors.length || index === -1) index = 0; 
 
    changeDiv.style.backgroundColor = colors[index]; 
 
}, false);

<div class="run">ff</div>

출처

2017-09-15 20:42:34 colxi

그는 매번 다른 색깔을 원하기 때문에? –

@colxi, 아마도 그는 3 가지 색상이 필요합니다. –

그럴만한 이유가있을 수 있습니다 : _P – colxi

당신은과 같이, JS에 변수를 저장할 수 있습니다 :

var changeDiv = document.getElementsByClassName("run")[0]; 
 

 
var colors = ["green", "blue", "yellow"]; 
 
var i = 0; 
 

 
function changeColor(style) { 
 

 
    style.style.backgroundColor = colors[i]; 
 
    if (i < colors.length - 1) { 
 
    i++ 
 
    } 
 
    else { 
 
    i = 0; 
 
    } 
 

 
} 
 

 
changeDiv.addEventListener("mouseover", function() { 
 
    changeColor(this); 
 
}, false);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <div class="run"> 
 

 
    e3reerghdhf </b> 
 

 
    djdhfdgfdgdhhghgd 
 
    </div> 
 
</body> 
 

 
</html>

출처

2017-09-15 20:48:04 jfeferman

나는 실제로 질문을 읽은 유일한 사람이라고 생각합니다. 친구 야 고마워 – george

다음은 다른 배경색을 통해 진행되는 해결책입니다. 및은 들지 않으면 원래 배경으로 재설정됩니다.

function colorChange(el, colors) { 
 
    
 
    var i   = 0, 
 
     baseColor = el.style.backgroundColor; 
 

 
    el.addEventListener('mouseenter', function() { 
 
    this.style.backgroundColor = colors[ i++ % colors.length ]; 
 
    }); 
 

 
    el.addEventListener('mouseleave', function() { 
 
    this.style.backgroundColor = baseColor; 
 
    }); 
 
    
 
} 
 
var colors = [ 'red', 'blue', 'yellow' ]; 
 
var p  = document.querySelector('p'); 
 

 
colorChange(p, colors);

<p>Hello world!</p>

출처

2017-09-15 21:05:49 hungerstar

"mouseover"가 동일한 div에서 trigged되었을 때 div 색상을 변경하는 방법은 무엇입니까? 순수 JS는

답변

관련 문제