如何讓懸停隻影響部分元素？

我有以下代碼：如何讓懸停隻影響部分元素？

.container { 
 
padding-top:20px; 
 
} 
 

 
.container:hover { 
 
background-color: red; 
 
} 
 

 
.text { 
 
    padding-top: 20px; 
 
} 
 

 
.container:before { 
 
content: 'before'; 
 
top: 5px; 
 
position: absolute; 
 
}

<div class='container'> 
 
    <span class='text'> 
 
    My text 
 
    </span> 
 
</div>

我所需要的「前」作爲標題，以便插入其作爲僞，向上移動，並通過添加填充到div創建它。安迪。現在，當我將鼠標懸停在div上時，僞指針也會突出顯示，這是我不想要的。

因爲它是外部應用程序的皮膚我有非常有限的可能性向dom添加元素，這是我認爲應該做的。我怎樣才能突出只有底部的部分沒有僞？也許有更好的方式來設計僞自身，以便它不會被覆蓋？純粹的CSS讚賞。

來源

2017-06-08 Zenon

爲了防止後臺從覆蓋填充以及加012到.container：

.container { 
 
    padding-top: 20px; 
 
    background-clip: content-box; 
 
} 
 

 
.container:hover { 
 
    background-color: red; 
 
} 
 

 
.text { 
 
    padding-top: 20px; 
 
} 
 

 
.container:before { 
 
    content: 'before'; 
 
    top: 5px; 
 
    position: absolute; 
 
}

<div class='container'> 
 
    <span class='text'> 
 
    My text 
 
    </span> 
 
</div>

或者使用margin-top: 20px;代替填充：

.container { 
 
    margin-top: 20px; 
 
} 
 

 
.container:hover { 
 
    background-color: red; 
 
} 
 

 
.text { 
 
    padding-top: 20px; 
 
} 
 

 
.container:before { 
 
    display: block; 
 
    width: 100%; 
 
    content: 'before'; 
 
    top: 5px; 
 
    position: absolute; 
 
}

<div class='container'> 
 
    <span class='text'> 
 
    My text 
 
    </span> 
 
</div>

來源

2017-06-08 11:34:46

一個簡單的解決方案是在容器類上使用margin-top而不是padding-top。

.container { 
 
    margin-top: 30px; 
 
    background-clip: content-box; 
 
} 
 

 
.container:hover { 
 
    background-color: red; 
 
} 
 

 
.text { 
 
    padding-top: 20px; 
 
} 
 

 
.container:before { 
 
    content: 'before'; 
 
    top: 5px; 
 
    position: absolute; 
 
}

<div class='container'> 
 
    <span class='text'> 
 
    My text 
 
    </span> 
 
</div>

來源

2017-06-08 11:42:41

你可以試試哈弗的.text代替.container並給予「初始」或「透明」的背景僞元素。

只要我的$ 0.02：我希望你明白，至少可以說這件事很奇怪。它將限制任何進一步的自定義，比如字體高度等。每次添加一行新的文本時，都需要調整填充或邊距或頂部。老實說，我不明白什麼樣的應用程序有這樣嚴格的皮膚，不能讓你添加一個元素。

來源

2017-06-08 11:45:33 Colton

爲什麼不使用後代選擇器？您也可以在:hover之下嵌套。與display: block;不需要使用固定大小的邊距和填充。

.container:hover .text { 
 
    background-color: red; 
 
} 
 

 
.text { 
 
    display: block; /* or just use a div instead */ 
 
} 
 

 
.container:before { 
 
    content: 'before'; 
 
    display: block; 
 
}

<div class='container'> 
 
    <span class='text'> 
 
    My text 
 
    </span> 
 
</div>

來源

2017-06-08 11:48:31 mizurnix

如何讓懸停隻影響部分元素？

回答

相關問題