如何申請子女：懸停但不是父母：懸停

使用以下html，當我將鼠標懸停在兒童上時，我獲得了父母的綠色背景。我怎麼能阻止這種情況發生？如果我懸停在子元素外面，我確實需要綠色背景。如何申請子女：懸停但不是父母：懸停

CSS3很好。

<style> 
     .parent { padding: 100px; width: 400px; height:400px; } 
     .parent:hover { background-color: green; } 
     .child { padding: 100px; width: 200px; height:200px; } 
     .child:hover { background-color: blue; } 
</style> 
<div class="parent"> 
     <div class="child">Child</div> 
</div>

來源

2010-04-23 case nelson

所以這是真的很醜，但它的作品（種）。我基本上是創建一個父母的副本作爲孩子的兄弟姐妹。父代覆蓋默認是隱藏的，然後顯示在孩子的懸停上。 Chrome不喜歡它，除非您使用+選擇器而不是〜選擇器。這不是非常可擴展的，但它可能工作。

正如其他人發佈，JavaScript可能是一個更好的解決方案。

<style> 
    .parent { padding: 100px; width: 400px; height:400px; position: relative; z-index: 998; } 
    .parent:hover { background-color: green; } 
    .child { padding: 100px; width: 200px; height:200px; position: relative; z-index: 1000; } 
    .child:hover { background-color: blue; } 
    .parent-overwrite { padding: inherit; width: inherit; height: inherit; position: absolute; top: 0; left: 0; z-index: 999; background-color: #FFF; display: none; } 
    .child:hover ~ .parent-overwrite { display: block; } 
</style> 

<div class="parent"> 
    <div class="child">Child</div> 
    <div class="parent-overwrite"></div> 
</div>

來源

2010-04-23 19:38:58

感謝您試用:)不過你，因爲這可擴展性韓元」的爲我工作。 – 2010-04-23 19:41:42

哈哈哈謝謝，這是一個有趣的問題要解決。我以前完全遇到過這個完全相同的問題，但我認爲我的解決方案是手動更改沒有懸停聲明的父級的類。這對你來說不起作用，因爲你想讓你的父母繼續工作。我的程序員認爲我會因爲這個醜陋，醜陋的黑客而被嚴重低估。謝謝你證明他錯了;） – 2010-04-23 21:58:14

最簡單的事情可能是使用JS這種CSS。也許你可以嘗試重新思考你的實現。你爲什麼試圖做這樣的事情？

來源

2010-04-23 18:04:29

我有一個大的樹的元素，其中一些將鼠標點擊響應。我只希望對點擊作出響應的元素進行高亮顯示。在javascript中這樣做將意味着基於mouseover/mouseout的樣式，並會大大增加代碼庫的膨脹。 – 2010-04-23 18:13:43

它不會臃腫的代碼庫 - 這將是約4-5行代碼，如果你正在使用jQuery。在僞代碼： $（ '父'）懸停（函數（）{...設置CSS綠色...}）; $（ '孩子'）懸停（函數（）{this.parent.css（..設置CSS白色..}）; – 2010-04-23 18:39:13

這是不可能的使用簡單的香草CSS。你要求僞造一個孩子（child:hover）以影響父母的background聲明。沒有辦法使用普通的css來指定這種事情。

這絕對可以使用JavaScript來完成。

來源

2010-04-23 18:08:46 eykanal

我不相信這不能用CSS來實現我想。我想以某種方式改變.parent：懸停只能選擇如果沒有有懸停的子元素這樣孩子就不會影響父聲明，而家長選擇會更挑剔 – 2010-04-23 18:17:59

不，這恰恰是。什麼CSS設計人員已排除了。它變得幾乎不可能代碼，規範，並使用排序模式。在XPATH，可以使用家長選擇，但目前還沒有僞元素和類擔心那裏。這是他們一個艱難的決定，但你*不能*使用CSS來讓孩子選擇過濾回升到影響父。 – 2010-04-23 20:14:02

我只能通過添加額外的標記來做到這一點。需要添加一個空的div，實質上它起着父背景的作用。看看這裏的CSS。

HTML部分：

<div class="parent"> 
    Parent 
    <div class="child"> 
     Child 
     <div class="grandson"> 
     Grandson 
     <div class="grandson-bg"></div> 
     </div> 
     <div class="child-bg"></div> 
    </div> 
    <div class="parent-bg"></div> 
    </div>

CSS部分：

article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } 

    .parent { display: block; position: relative; z-index: 0; 
      height: auto; width: auto; padding: 25px; 
      } 

    .parent-bg { display: block; height: 100%; width: 100%; 
       position: absolute; top: 0px; left: 0px; 
       border: 1px solid white; z-index: 0; 
      } 
    .parent-bg:hover { border: 1px solid red; } 

    .child { display: block; position: relative; z-index: 1; 
      height: auto; width: auto; padding: 25px; 
     } 

    .child-bg { display: block; height: 100%; width: 100%; 
       position: absolute; top: 0px; left: 0px; 
       border: 1px solid white; z-index: 0; 
      } 
    .child-bg:hover { border: 1px solid red; } 

    .grandson { display: block; position: relative; z-index: 2; 
       height: auto; width: auto; padding: 25px; 
      } 

    .grandson-bg { display: block; height: 100%; width: 100%; 
       position: absolute; top: 0px; left: 0px; 
       border: 1px solid white; z-index: 0; 
       } 
    .grandson-bg:hover { border: 1px solid red; }

http://jsbin.com/ubiyo3/edit

來源

2010-04-23 19:57:41 RussellUresti

我有什麼，我認爲這是一個更好的解決方案，因爲它可擴展到多層次，多達想要的，不只是兩三個。

我使用邊框，但它也可以用任何想要的樣式完成，如背景顏色。

與邊框，這個想法是：

有不同的邊框顏色只有一個格，股利在鼠標的位置，而不是任何父母，沒有任何一個孩子，所以可以只看到這種不同顏色的邊框，其餘的則保持白色。

你可以測試它：http://jsbin.com/ubiyo3/13

這裏是代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Hierarchie Borders MarkUp</title> 
<style> 

    .parent { display: block; position: relative; z-index: 0; 
      height: auto; width: auto; padding: 25px; 
      } 

    .parent-bg { display: block; height: 100%; width: 100%; 
       position: absolute; top: 0px; left: 0px; 
       border: 1px solid white; z-index: 0; 
      } 
    .parent-bg:hover { border: 1px solid red; } 

    .child { display: block; position: relative; z-index: 1; 
      height: auto; width: auto; padding: 25px; 
     } 

    .child-bg { display: block; height: 100%; width: 100%; 
       position: absolute; top: 0px; left: 0px; 
       border: 1px solid white; z-index: 0; 
      } 
    .child-bg:hover { border: 1px solid red; } 

    .grandson { display: block; position: relative; z-index: 2; 
       height: auto; width: auto; padding: 25px; 
      } 

    .grandson-bg { display: block; height: 100%; width: 100%; 
       position: absolute; top: 0px; left: 0px; 
       border: 1px solid white; z-index: 0; 
       } 
    .grandson-bg:hover { border: 1px solid red; } 

</style> 
</head> 
<body> 
    <div class="parent"> 
    Parent 
    <div class="child"> 
     Child 
     <div class="grandson"> 
     Grandson 
     <div class="grandson-bg"></div> 
     </div> 
     <div class="child-bg"></div> 
    </div> 
    <div class="parent-bg"></div> 
    </div> 
</body> 
</html>

來源

2012-02-06 09:49:49 z666zz666z

如何申請子女：懸停但不是父母：懸停

回答

相關問題