如何使用CSS3

应用的样式我有下面的div和CSS，如何使用CSS3

.parent:hover{ 
 
    background-color:violet; 
 
} 
 
.child:hover{ 
 
    background-color:grey; 
 
}

<div style='border:2px solid red;width:200px;height:100px' class='parent'> 
 
</div> 
 
    <div style='margin-top:25px;margin-left:50px;border:2px solid gray;width:100px;height:50px' class='child'>  
 
    </div>

这里的时候，我将鼠标悬停背景色紫罗兰已经应用以及父我已经实现了儿童。但我需要实现当我悬停父母的孩子类也需要适用于相应的div ..以及当我悬停孩子的父类也需要申请在相应的div如何实现？

来源

2016-05-18 Akbar Basha

*当我悬停孩子的父类也需要应用* - 这是不可能的CSS。 – Harry

@Harry当你悬停子元素，那么它已经悬停其父元素，你可以尝试。 –

@HarshSanghani：仔细看问题的结构，然后发表评论:) – Harry

我试了一下哥们

我差点解决方案。

.parent:hover + .child{ background-color:violet; }

只需添加这个CSS，你会得到改变在这两个DIV当u专注于父DIV。

它正在处理父项，因为子div与父项相邻。

但它不适用于孩子，因为父母不在孩子旁边。

只是试试我的css

来源

2016-05-18 06:22:26 Punit

不幸的是，这不能在CSS中完成，但它可以用一点点的jQuery完成。这里是一个例子:) https://jsfiddle.net/qky6z3jv/

$(".parent,.child").hover(function() { 
    $(".parent").css('background-color','violet'); 
    $(".child").css('background-color','grey'); 
}, function() { 
    $(".parent,.child").css('background-color','white'); 
});

来源

2016-05-18 05:58:20 kknmalone

谢谢，但我需要实现使用CSS ... –

你可以使用简单的JavaScript来做到这一点。

创建一个函数，将改变这两个div的颜色，如为每个div元素分配一个“ID”。

function changeColor(color_value){ 
    document.getElementById('div1').style.backgroundColor = "'" + color_value + "'"; 
    // or you can do something like this 
    document.getElementById('div1').setAttribute('background-color', color_value); 
    // do the same with the second div.   
}

和改变等

<div id="div1" onClick="changeColor('color_hex_value_here')" style='border:2px solid red;width:200px;height:100px' class='parent' 

</div> 
<div id="div2" onClick="changeColor('color_hex_value_here')" style='margin-top:25px;margin-left:50px;border:2px solid gray;width:100px;height:50px' class='child'> 
</div>

的div //这可以在不jQuery的完成或添加任何外部库 //多一个此。你一个接一个地写了两个不同的div。 //可能是你关心试图达到的概念是“父”里面的“孩子” DIV DIV

来源

2016-05-18 06:15:07

不需要使用Javascript和JQuery的解决方案.. –

伟大:)帮助 –

谢谢阿里，但有任何可能实现使用CSS :-) –

如何使用CSS3

回答

相关问题