변경 <body> 배경 이미지

그럼 DIV ID를 유혹하는 동안 몸 태그에 검은 색/흰색 배경 이미지를 가지고 있고, 나는 그것이 도시의 스카이 라인의 배경 이미지 이미지로 전환하고 싶은 말은하자 = "1"로 설정하고 div id = "2"로 가리키면 야간에는 같은 스카이 라인의 배경 이미지가 표시됩니다. 나는 어떻게 그것에 대해 갈 것인가?변경 <body> 배경 이미지

나는 '괜찮은'파이썬 지식뿐만 아니라 이미 이것을 위해 작성된 html/css를 가지고 있지만 javascript와 같은 스크립팅 언어에 대한 경험은 없다. 나는 새롭고 배우기를 원하기 때문에 큰 코드 스 니펫을 복사하지 않는 것이 좋습니다. 당신은 CSS를하여이를 달성 할 수

/*css*/ 

#bg{background:url('a'); 
} 

#header{ 
    position:absolute; 
    border:double 30pt; 
    width:95%; 
    height:15%; 
} 

#header img{height:120px; 
} 

#header img:hover{ 
    transform: rotate(-10deg); 
} 

#allies{ 
    border:double 30pt; 
    position:relative; 
    width:45%; 
    top:250px; 

} 

#allies:hover ~ #bg{background:url('b'); 
} 

#enemies{ 
    border:double 30pt; 
    position:relative; 
    width:45%; 
    /*top:55px;*/ 
    top:-67px; 
    left:967px; 
} 

#enemies:hover ~ #bg{background:url('c') 
} 

div img{ 
    width:120px; 
    height:100px; 
    display:block; 
    margin-left:auto; 
    margin-right:auto; 
    padding-top:10px; 
    padding-bottom:5px; 
} 


<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>AE</title> 
    <link href="AE.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body id="bg"> 
    <div id="header"> 
     <a href="index.htm"> 
     <img src="http://www.iconsdb.com/icons/preview/black/home-5-xxl.png"> 
     </a> 
    </div> 
    <div id="allies"> 
     <img src="http://fontmeme.com/permalink/170203/949c0c2c2c0c34c044b9b45585717a70.png"> 
     <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
     </ul> 
    </div> 
    <div id="enemies"> 
     <img src="http://fontmeme.com/permalink/170203/e8d4db59e876e5c94bd8f072137e33e2.png"> 
     <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
     </ul> 
    </div> 
    </body> 
</html>

출처

2017-02-03 TheJack

파이썬도 스크립팅 언어입니다. – Rob

javascript를 사용하여 div에 이벤트 리스너 (mouseEnter, mouseLeave)를 추가 할 수 있습니다. 그런 다음이 청취자 내부에서 역 동성이 배경을 바꿉니다. 쉬운 방법은 jQuery를별로 좋아하지 않는다고해도 jQuery를 사용하는 것이고,이 이벤트를 처리하는 쉬운 방법입니다. – Groben

내가 당신이 원하는 것을 얻었다는 jQuery를 사용

$("#allies").hover(function() { 
    $('body').css("background", "url(https://cdn.pixabay.com/photo/2013/04/14/20/24/water-103817_960_720.jpg"); 
}); 

$("#enemies").hover(function() { 
    $('body').css("background", "url(http://weknowyourdreams.com/images/fire/fire-02.jpg"); 
});

Fiddle here

출처

2017-02-03 13:43:22

내가 찾고있는 것. 매우 감사. – TheJack

니스! 사람들이 찾고있는 것을 찾을 수 있도록하기 위해 이것을 답변으로 표시하는 것을 잊지 마십시오. 좋은 하루 되세요! –

는 여기에 지금까지 무슨이다. jQuery hover() 함수를 사용하십시오. 함수 내부에서 css() fuction 또는 css 파일에서 정의한 (더 나은) addClass()/removeClass()를 사용할 수 있습니다. https://api.jquery.com/hover/

JS :

$('#allies').hover(function() { 
    $('#bg').addClass('newBg1'); 
}, function() { 
    $('#bg').removeClass('newBg1'); 
}); 
$('#enemies').hover(function() { 
    $('#bg').addClass('newBg2'); 
}, function() { 
    $('#bg').removeClass('newBg2'); 
});

CSS :

JQuery와 :

.newBg1 { 
    background-image: #your url; 
} 
.newBg2 { 
    background-image: #your url; 
}

출처

2017-02-03 13:30:30 ElChupacabra

변경 <body> 배경 이미지

답변

관련 문제