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.