jQuery 호버 클래스의 속성 변경

Question

호버 - 배경색을 어떻게 변경합니까? 컬러 스틸 흰색 ...

$('#li-a-bgcolor').ColorPicker({ 
    onChange: function (hsb, hex, rgb) { 
     $('#li-a-bgcolor').css('backgroundColor', '#' + hex); 
     $('.myhoverclass').css('background-color', '#' + hex); 
    } 
    }); 

...

$('.box a').hover(
     function(){ $(this).toggleClass('myhoverclass') } 
    ) 

을하지만 ColorPicker를 함께 .myhoverclass 변경할 때 :

<style> 
     .myhoverclass {background:#FFF;} 
    </style> 

는이 코드로 전환. 실수는 어디 있습니까?

감사합니다.

Answer 1

내가 제대로 이해하면 색상을 선택하고 호버 색상을 변경하려고합니다. 문제는 .myhoverclass {background:#FFF;}에 대한 클래스 정의/규칙을 변경하려고하는데 매우 어려운 일입니다. http://jsfiddle.net/k6kp1e5n/

HTML

<div id="colorPicker"> 
    <div style="background-color: #0000FF"></div> 
    <input type="text" value="#0000FF"> 
</div> 
<br><br> 
<div class="box"> 
    <a href="#">Hover me</a> 
</div> 

JS

$('#colorPicker').ColorPicker({ 
    color: '#0000FF', 
    onChange: function(hsb, hex, rgb) { 
     $('#colorPicker div').css('backgroundColor', '#' + hex); 
     $('#colorPicker input').val('#' + hex); 
    } 
}); 

// Handles "hovering" 
$('.box a').on('mouseenter', function (e) { 
    $(this).css('background-color', $('#colorPicker input').val()); 
}); 
$('.box a').on('mouseout', function(e){ 
    $(this).css('background-color','#FFF'); 
}); 

CSS

:

대신 나는이 같은 솔루션을 제안

.box {background:#FFF;} 

Answer 2

이렇게 간단하게 만듭니다. 두 개의 클래스를 만들고 각 클래스의 색상을 정의하십시오. 언제든지 마우스를 가져 와서 마우스를 가져 가면 클래스를 추가하고 제거 할 수 있습니다.