html

CSS hover animation hides text  #angularjs #reactjs

  • No need for the z-index, “position: relative” will suffice 😉 – Ali Abdelfattah 39 mins ago
  • Stack Overflow works best with JavaScript enabled
  • if I toggle the hover effect, the background hides the text.
  • As suggested by beardheadcode in this stack: Fill background color left to right CSS
  • @PraveenKumar, works if we set higher z-index to li it self, check codepen above…

if I toggle the hover effect, the background hides the text. Which atttribute shoud I add that the text of the listpoints is not under the “:before” background.

@ng_real_ninja: CSS hover animation hides text #angularjs #reactjs

nav { position: absolute; top: 0; bottom: 0; background-color: #2c3e50; width: 100px; } nav ul { margin: 0; padding: 0; } nav ul li { border-bottom: 1px solid #ecf0f1; padding: 10px 0 10px 0; position: relative; color: red; } nav ul li:hover { color: green; } nav ul li:before { position: absolute; content: ”; top:0; left: 0; width: 0; height: 100%; background-color: white; transition:all 0.3s ease; z-index: 0; } nav ul li:hover::before { width: 100%; }

nav { position: absolute; top: 0; bottom: 0; background-color: #2c3e50; width: 100px; } nav ul { margin: 0; padding: 0; } nav ul li { border-bottom: 1px solid #ecf0f1; padding: 10px 0 10px 0; position: relative; color: red; } nav ul li:hover { color: green; } nav ul li:before { position: absolute; content: ”; top: 0; left: 0; width: 0; height: 100%; background-color: white; transition: all 0.3s ease; } nav ul li:hover::before { width: 100%; } nav ul li span { position: relative; z-index: 99; }

html

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.