Clever Geek Handbook

How do I change the color of an element on hover?

I have a column of anchor tags, they have a class that defines a light blue color.

I made a function, so when the mouse ended on any of the anchor elements, a link to the anchor image is shown.

And now I would like to add a different color to the selected anchor tag. This way the user can see where in the column the image is linked. More for user reference.

I added a class with a different color in the mouseover function, but it didn't work. So I would like to know if you have any suggestions for solving it.

I have a function to create anchor tags and where I add the original color to them:

for (i=0; i<numberOf; i++) {
        var param2Slider = document.createElement("a");
        param2Slider.id = 'sliderAnchor_'+i;
        sliderAnchorId = param2Slider.id;
        param2Slider.name = 'param2Slider';
        param2Slider.className = 'nav2Slider';
        document.getElementById('nav2Slider').appendChild(param2Slider);
    }

And my function with mouse action:

function navigator2Slider(flatParam, directionParam) {

$('.nav2Slider').on('mouseover', function () {
    //$(this).attr('style').color='#29378F';
    nav2SliderName =  $(this).attr('id');
    nav2Id = nav2SliderName.split("_").pop();
    nav2Index = parseInt(nav2Id);
        $('#'+flatParam+'Stream').cycle(nav2Index);
        $('#'+directionParam+'Stream').cycle(nav2Index);            
});

}

I tried adding a new color for both functions, but my first problem is even being added to the first anchor tag, the color is not showing. And secondly, I want the color to be with the selected anchor tag, so I think it should be added to the mouserover function.

Any suggestions are greatly appreciated.

+3


source to share


2 answers


Use .css

to set color:

$(this).css('background-color', '#29378F');

As an example:



http://jsfiddle.net/qVNen/

http://api.jquery.com/css/

+4


source


If you just want to make some styling changes to the css on hover, why not use :hover 

a:hover{
  /* insert your css changes */
}


The hover CSS pseudo-class for when the user assigns an element with a pointing device, but does not necessarily activate it.

EXAMPLE

+1


source






More articles:


All Articles