javascript - 文本的悬停颜色更改

Question

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

在下面提供我的代码...

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

        });

Answer 1

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
}

Answer 2

目前，文本的悬停是通过 css :hover 设置样式的，因此仅在悬停文本时才会调用它。解决你的问题

  ...

                        $(this).hover(

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

                        },
  ...

Answer 3

你可以在纯 CSS 中做到这一点

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

或者它也许

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

这是一个小提琴 http://jsfiddle.net/Y2MAp/2/

希望这可以帮助