Hover-Effekt auf zwei Zeilen in einem Absatz funktioniert nicht

Ich habe eine <p> enthält zwei <span> s, und ich möchte eine von ihnen zu schweben, und jeder auf einer einzelnen Linie sein (erreicht durch display:block).Hover-Effekt auf zwei Zeilen in einem Absatz funktioniert nicht

auf Schwebeflug, sollten sie beide hervorgehoben werden, so habe ich eine :hover auf die umliegenden <p> gesetzt.

Immer noch wird nur eine span hervorgehoben.

Warum? Und wie kann ich es ändern?

https://jsfiddle.net/o8wk7n8t/

Danke

Quelle

2016-06-22 devman

https://jsfiddle.net/o8wk7n8t/1/ – potashin

Fragen Code Hilfe suchen müssen den kürzesten Code enthalten notwendig, es zu reproduzieren ** in der Frage selbst **. Obwohl Sie einen [** Link zu einem Beispiel oder einer Site ** angegeben haben] (http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work- can-i-just-einfügen-a-link-to-it), sollte die Verknüpfung ungültig werden, würde Ihre Frage keinen Wert für andere zukünftige SO-Benutzer mit dem gleichen Problem haben. –

Set Layout .parent mit overflow: hidden wie Sie float verwenden.

.parent { 
    overflow: hidden; 
}

.parent { 
 
    overflow: hidden; 
 
} 
 
.parent:hover { 
 
    background-color: red; 
 
} 
 

 
.right { 
 
    float:right; 
 
} 
 

 
.left, 
 
.right { 
 
    display: block; 
 
}

<p class="parent"> 
 
<span class="left">Hi</span> 
 
<span class="right">Ho</span> 
 
</p>

Quelle

2016-06-22 09:29:59

es funktioniert, danke :) können Sie erklären, warum? Was genau hat Überlauf damit zu tun? – devman

@devman Denken Sie immer daran, das Layout der übergeordneten Elemente festzulegen, wenn Sie float für untergeordnete Elemente verwenden. 'overflow: hidden' setzt das Layout von Parent. Es gibt viele andere Möglichkeiten, das Layout zu setzen. Hier können Sie mehr über andere Layoutmöglichkeiten erfahren. Http://www.satzansatz.de/cssd/onhavinglayout.html –

Hover-Effekt auf zwei Zeilen in einem Absatz funktioniert nicht

Antwort

Verwandte Themen