如何在mouseover上更改元素的颜色

how to change the color of an element on mouseover?

本文关键字:元素 颜色 mouseover      更新时间:2023-09-26

我有一列锚标记,它们有一个定义浅蓝色的类。

我制作了函数,所以当鼠标悬停在任何锚元素上时,就会显示指向锚标记的一些图像链接。

现在,我想为所选的锚标记添加一种不同的颜色。因此,用户可以看到图像在列中的链接位置。更多以供用户参考。

我在mouseover函数上添加了一个具有不同颜色的类,但这并没有起作用。所以我想知道你是否对如何解决这个问题有任何建议。

我有一个功能来构建锚标签,并在其中添加原始颜色:

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);
    }

我的鼠标悬停功能:

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);            
});

}

我试图在这两个函数上添加新的颜色,但我的第一个问题是,即使添加到第一个锚标记,颜色也不会显示。其次,我希望颜色与所选的锚点标签一致,所以我认为应该将其添加到鼠标漫游器功能中。

如有任何建议,我们将不胜感激。

使用.css设置颜色:

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

作为示例:

http://jsfiddle.net/qVNen/

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

如果您只是想在悬停时对css进行一些样式更改,为什么不使用:hover

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

当用户指定元素,但不一定要激活它。

示例