Google 버튼 효과를 설정할 수 없습니다.

Question

여기에 약간의 딜레마가 있습니다. 내가하려고하는 것은 2 개의 사이드 버튼을 만들려고 노력하고 있는데, 하나가 올려 졌을 때 배경색이 바뀌고 다른 하나가 바뀌면 바뀝니다. 토글처럼. 이제는 문제가 생겼습니다. 하나를 클릭하면 클래스 추가와 같은 효과가 유지되지만, 이제는 mouseleave 할 때 상태가 유지되지 않습니다. 내가 잘못하고있는 곳을 알려주십시오. 여기

여기 는 바이올린에게 있습니다 Fiddle

모든 것을 당신이 할 수 있도록 다음 문제를 단순화 할 수 있습니다 CSS 클래스에 모든 스타일을 위임 할 경우 일부 코드는

$('#masterContainer #leftDiv').mouseenter(function (event) { 
      $(this).css('background-color', 'black'); 
      $(this).css('color', 'white'); 
      $('#masterContainer #leftDiv img').attr('src', 'heartWhite.png'); 
     }); 

Answer 1

입니다. (난 당신이 찾고있는 것을 이해하고있어합니다.)

바이올린 : http://jsfiddle.net/xYLyT/2/

하자 CSS는 작업을한다. :)

HTML :

<div class="container"> 
    <div class="box zuck"> 
     Zuck 
    </div> 
    <div class="box albert"> 
     Albert 
    </div> 
</div> 

JS는 :

$('.box').click(function (event) { 
    $('.box').removeClass('clicked'); 
    $(this).addClass('clicked'); 
    event.stopPropagation(); 
}); 

CSS : 나 초 버튼 올리면

body { 
    background-color : silver; 
    margin   : 0; 
    padding   : 0; 
} 
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    } 

.container { 
    border : 2px solid black; 
    float : left; 
    height : 180px; 
    width : 803px; 
} 

.box { 
    border-right : 1px solid black; 
    float  : left; 
    height  : 100%; 
    transition : all 1s ease 0s; 
    width  : 50%; 
    padding: 0; 
} 
.box:hover, 
.box.clicked { 
    background-color: black; 
    color: white; 
} 
.zuck { 
    background: url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTUZnc_P0eH1w67I_YaaWo18Tgt83RFrepGDJm-AA8d9pg_kWM8Pw') no-repeat center center; 

} 

.albert { 
    background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYtxk2DUEWNsNpH0jTMqLc22tYccLZiwYxiCKKOCLGTVr2QZp_nw') no-repeat center center; 
} 

Answer 2

같다 상자의 클래스를 hover 및 click으로 변경하십시오. 예를 들어

, 가정 태그 :

<div class="box">container one</div> 

<div class="box">container two</div> 

및 CSS : 당신이 후 것 같은

.box { 
    display: inline-block; 
    height: 200px; 
    width: 400px; 
    background: #cdcdcd; 
} 
.box.hovered, .box.clicked { 
    background: #797979; 
} 

당신이 그것을 소리 효과를 얻을 수 있습니다

// Handle the mouseenter/leave events with a unique class 
$('.box').on('mouseenter', function() { 
    $(this).addClass('hovered'); 
}).on('mouseleave', function() { 
    $(this).removeClass('hovered'); 
}); 
// Handle click event with a different class and toggle method 
$('.box').on('click', function() { 
    $(this).toggleClass('clicked'); 
}); 

을 다른 방법으로, 상자를 으로 변경하려면 스위치를 클릭하면됩니다. 사용할 수 있습니다

이

$('.box').on('click', function() { 
    $(this).removeClass('hovered'); 
    $(this).siblings('.box').addClass('hovered') 
}); 
// Use this block instead of the previous `click` handler above 

스타일 시트를 통해 스타일을 추상화 (보다는 .css 방법을 사용하여)의 장점은 즉 :

A. 그것은 마크 업에서 (문제의 단락 지을) 당신의 모습을 분리, 인라인 스타일의 오버라이드 문제를 방지합니다.

B. 문제를 클래스 추가/제거로 줄임으로써 DOM 상호 작용을 극적으로 단순화합니다.

은 다음과 같은 간단한 일이 거기에가는 자바 스크립트 waaaay를 너무 많이 거기 Fiddle