文字的悬停颜色改变

Hover color change for text

本文关键字：改变 颜色 悬停 文字      更新时间：2023-09-26

当我将鼠标悬停在立方体上时，可以看到弹出窗口。
当我将鼠标悬停在立方体下方的文字上时，我看到了颜色的变化。

当我将鼠标悬停在立方体上时，如何看到文本的颜色变化?

提供下面的代码:

http://jsfiddle.net/Lx7kx/2/embedded/result/

$('document').ready(function() {
            window.setTimeout(function() {
                $('.cubeCellGuest').each(function() {
                    var htmlText = $(this).attr('data-text');
                    $(this).append('<div class="cubeTextStyleGuest">' + htmlText + '</div>');
                    $(this).hover(
                    function() {
                        $(".cubeTextStyleGuest").append("<span class='divStockGuest'>Guest</span>");
                    },
                    function() {
                        $(this).find("span:last").remove();
                    });
                });
            }, 600);
        });

jQuery:

$('.cubeCellGuest').each(function() {
    var htmlText = $(this).attr('data-text');
    $(this).append('<div class="cubeTextStyleGuest">' + htmlText + '</div>');
    $(this).hover(function() {
       $(".cubeTextStyleGuest").addClass("hovered").append("<span class='divStockGuest'>Guest</span>");
    }, function() {
          $(this).find("span:last").remove();
          $(".cubeTextStyleGuest").removeClass("hovered");
    });
});
CSS: 

.hovered{
  color: red; //any color that you want
}

当前文本的悬停样式是通过css:hover设置的，所以它只在文本悬停时调用。来解决你的问题

  ...
                        $(this).hover(
                        function() {
                            $(".cubeTextStyleGuest").css('color', '#cc6600').append("<span class='divStockGuest'>Guest</span>");
                        },
  ...

你可以在纯css中这样做

.cube:hover + .cubeTextStyleGuest
{
   color:#cc6600;
}

或者

.cube:hover ~ .cubeTextStyleGuest
    {
       color:#cc6600;
    }

这里有一把小提琴http://jsfiddle.net/Y2MAp/2/

希望能有所帮助

相关文章：