Geek asks and answers

Change div colors with hover and click in jQuery

Did anyone help. I have these two:

I want the text to change to light green when it freezes, white when it does not freeze, and red when pressed.

$(".music").hover(
    function() {
        $(this).css('color','lightgreen');
    }, 
    function() {
        $(this).css('color', 'white');
    }
);

$(".music").click(function () { 
    $('#result').load('album_list_index.php');
    $(this).css({ 'color': 'red', 'font-size': '100%' });
});

Thank you in advance

AC

NOTE: OK, I am sorry that I did not understand myself.

I need the div to be white, if not a mousedover I need it to be gree when the mouse And I need it to be red when pressed and stay red until another button is pressed.

Thanks to everyone for introducing the expecialy add class and removing the class cases, it was a good lesson that I will use when I learn the technique a bit more.

+3
source share
4 answers

, , , ,

click, . :

a { color: white; }
.active { color: red; }
.hover { color: lightgreen; }

$(".music").hover(
    function() {
        $(this).addClass("hover");
    }, 
    function() {
        $(this).removeClass("hover");
    }
);

$(".music").click(function () { 
    $('#result').load('album_list_index.php');
    $(".music").removeClass("active");
    $(this).removeClass("hover").addClass("active");
});

+4

CSS: :hover :active.

, jQuery, .hover() .click().

+3

Just wrap the code in $(document).ready(function() { // code here });and it will work.

+2
source

Using CSS is recommended ... but with jquery you can do

  $(document).ready(function(){
        $(".music").mouseover(function() {
           if(!$(this).hasClass('dontchange')){
              $(this).css('color','lightgreen');
           }
        });
        $(".music").mouseout(function() {
               if(!$(this).hasClass('dontchange')){
                $(this).css('color', 'white');
             }
        }

        $(".music").click(function () { 
         $(this).addClass('dontchange');
        $('#result').load('album_list_index.php');
        $(this).css({ 'color': 'red', 'font-size': '100%' });
        });
        });
+1
source

More articles:


All Articles