懸停應用CSS到多個組件

我具有這樣的形狀，其由3個部分組成：懸停應用CSS到多個組件

 * ***************************** * 
    *** *       * *** 
    ***** *       * ***** 
******* ***************************** *******

如上圖所示，該形狀包括由兩個三角形（一個在左側包圍的矩形的一個在右邊）。

我想，每當用戶將鼠標懸停在其組件中的任何一項所述的整體形狀改變到相同的顏色。

我已經使用各種方法來完成這個任務，但沒有成功嘗試。

這裏是我現在有on JSFiddle。

形狀是怎麼樣的了，但我最關心的是如何讓懸停功能爲我的工作對象。

即使我努力在小提琴的JavaScript執行上面的，我會接受任何其他的替代方法，將讓我的代碼工作。

來源

2014-12-29 HkFreaKuser1673718

做會聲明對父母，而不是孩子們的顏色的東西。 – SoluableNonagon

http://jsfiddle.net/a6p924od/1/ – SoluableNonagon

感謝您的建議:-) – HkFreaKuser1673718

首先，你的jsfiddle沒有顯示.slopeRight，我增加了以下的html：

.slopeRight { 
    border-bottom: 100px solid #D8D8D8; 
    border-right: 50px solid transparent; 
    position: absolute; 
    top: 10px; 
    left: 255px;         
}

然後我包圍所有的矩形部件下一個叫做.wrap的div，並添加了以下css：

.wrap:hover .tabStyle { 
    backGround: red; 
    border-color: red; 
} 

.wrap:hover .slopeLeft { 
    border-color: transparent red red transparent ; 
} 

.wrap:hover .slopeRight { 
    border-bottom: 100px solid red; 
    border-right: 50px solid transparent; 
}

這裏有一個工作小提琴... http://jsfiddle.net/svzrkdu6/10/

此外，你確定你想3個組件到你的形狀？因爲如果沒有，你可以創建一個梯形代替，這是更爲簡潔......看看這個小提琴

http://jsfiddle.net/383rksx6/1/

來源

2014-12-29 19:58:28 Bolboa

謝謝很多人Bolboa <3 <3 – HkFreaKuser1673718

沒問題:) ... – Bolboa

我已經做到了像這裏：

<div class="container"> 
    ... your code  
</div> 


.container:hover .tabStyle{ 
    background : #000; 
    border-color: #000; 
} 

.container:hover .slopeLeft, .container:hover .slopeRight{ 
    border-bottom-color: #000; 
}

其中.container是您的div

的jsfiddle父元素：http://jsfiddle.net/svzrkdu6/12/

來源

2014-12-29 17:47:46

你沒有使用他的.slopeRight任何CSS，注意OP指定有兩個三角形，他希望一個矩形修改。你的CSS只修改左邊的三角形和矩形... – Bolboa

謝謝你指出這一點。我已經更新了我的答案。 –

它使用純CSS是可以實現的。修改您的代碼行：

/* Just for an example */ 
 
.child { 
 
    height: 20px; 
 
    border: 1px solid black; 
 
} 
 

 
/* Your solution */ 
 
.parent:hover .child { 
 
    background-color: red; 
 
}

<div class="parent"> 
 
    <div class="child first">A</div> 
 
    <div class="child second">B</div> 
 
    <div class="child third">C</div> 
 
</div>

來源

2014-12-29 17:48:40

懸停應用CSS到多個組件

回答

相關問題