CODEWITHSUNDEEP
htmlcss
TAHER
TAHER

Reputation: 71

Hide element normally and show it hover using transitions

I want to hide the numbers and when hover in li the numbers will appear by using (Transition) but in my code the numbers dont hide

body {
  background: orange;
}

ul {
  width: 350px;
  margin: 50px auto;
  background: white;
  list-style-type: none;
  padding: 0;
}

li {
  padding: 5px 10px 5px 0;
  font-size: 16px;
}

.n {
  padding: 5px 0px;
  background-color: #ee2222;
  color: white;
  transition: .2s ease-in-out;
}

li:hover .n {
  padding: 5px 10px;
}
<ul>
  <li><span class="n">1</span>list item</li>
  <li><span class="n">2</span>list item</li>
  <li><span class="n">3</span>list item</li>
</ul>

Upvotes: 2

Views: 71

Answers (3)

DPS
DPS

Reputation: 1003

try something like this.

.n {
visibility :hidden;
padding: 5px 0px;
background-color: #ee2222;
color: white;
transition: .2s ease-in-out;
}

li:hover .n {
visibility:visible;
padding: 5px 10px;
}

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

The way you are planning to hide is wrong plus the CSS structure is also wrong in transition. Corrected code will be using opacity. See the /* Changed here. */ in the code for changes:

body {
  background: orange;
}

ul {
  width: 350px;
  margin: 50px auto;
  background: white;
  list-style-type: none;
  padding: 0;
}

li {
  padding: 5px 10px 5px 0;
  font-size: 16px;
}

.n {
  padding: 5px 0px;
  opacity: 0;
  background-color: #ee2222;
  color: #ee2222;                       /* Changed here. */
  transition: all .2s ease-in-out;
}

li:hover .n {
  padding: 5px 10px;
  opacity: 1;                           /* Changed here. */
  color: #fff;                          /* Changed here. */
  margin-right: 5px;                    /* Changed here. */
}
<ul>
  <li><span class="n">1</span>list item</li>
  <li><span class="n">2</span>list item</li>
  <li><span class="n">3</span>list item</li>
</ul>

Preview

Initial View:

initial

Hovered:

hovered

Note: I have also added an extra margin for readability.

Upvotes: 4

Gerard
Gerard

Reputation: 15786

You can manipulate the opacity like below.

body {
  background: orange;
}

ul {
  width: 350px;
  margin: 50px auto;
  background: white;
  list-style-type: none;
  padding: 0;
}

li {
  padding: 5px 10px 5px 0;
  font-size: 16px;
}

.n {
  padding: 5px 0px;
  background-color: #ee2222;
  color: white;
  opacity: 0;
  transition: .2s ease-in-out;
}

li:hover .n {
  padding: 5px 10px;
  opacity: 1;
}
<ul>
  <li><span class="n">1</span>list item</li>
  <li><span class="n">2</span>list item</li>
  <li><span class="n">3</span>list item</li>
</ul>

Upvotes: 1

Related Questions