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/

希望这有帮助

悬停文本的颜色更改

3 个答案: