简体   繁体   中英

Hover color change for text

When I hover over the cube I see the pop up.
When I hover over the text below the cube I see the change of color.

How can I see the color change of the text when I hover over the cube?

Providing my code below:

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
}

Currently the hover for your text is styled through css :hover, so it's only called when you hover the text. To solve you're problem

  ...

                        $(this).hover(

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

                        },
  ...

you can do this in pure css

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

or it maybe

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

here is a fiddle http://jsfiddle.net/Y2MAp/2/

Hope this helps

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM