CODEWITHSUNDEEP
htmlcss
kawnah
kawnah

Reputation: 3414

CSS - multiple items show children on hover state

Consider the following code below, with list items and a delete link next to each. I want to have it so only the hovered link item shows the delete button, not all of them. See below for a demonstration of the issue:

.todo-list {
  list-style-type: square;
}

.todo-list__delete {
  display: none;
}

.todo-list:hover .todo-list__delete {
  display: inline-block;
}
<ul class="todo-list">
    <li>
      Item 1
      <a class="todo-list__delete" href="#">Delete</a>
    </li>
    <li>
      Item 2
      <a class="todo-list__delete" href="#">Delete</a>
    </li>
    <li>
      Item 3
      <a class="todo-list__delete" href="#">Delete</a>
    </li>
  </ul>

Seems like a simple issue but what would be the best way to target the active hovered element in CSS?

Upvotes: 0

Views: 61

Answers (5)

SourceOverflow
SourceOverflow

Reputation: 2048

I want to have it so only the hovered link item shows the delete button

You kinda answered it yourself. Simply specify the item with :hover

.todo-list {
  list-style-type: square;
}

.todo-list__delete {
  display: none;
}

.todo-list li:hover .todo-list__delete { /* < here */
  display: inline-block;
}
<ul class="todo-list">
    <li>
      Item 1
      <a class="todo-list__delete" href="#">Delete</a>
    </li>
    <li>
      Item 2
      <a class="todo-list__delete" href="#">Delete</a>
    </li>
    <li>
      Item 3
      <a class="todo-list__delete" href="#">Delete</a>
    </li>
  </ul>

Upvotes: 1

Daniel Sixl
Daniel Sixl

Reputation: 2499

Limit your :hover selector to list elements.

.todo-list {
  list-style-type: square;
}

.todo-list__delete {
  display: none;
}

.todo-list li:hover .todo-list__delete {
  display: inline-block;
}
<ul class="todo-list">
    <li>
      Item 1
      <a class="todo-list__delete" href="#">Delete</a>
    </li>
    <li>
      Item 2
      <a class="todo-list__delete" href="#">Delete</a>
    </li>
    <li>
      Item 3
      <a class="todo-list__delete" href="#">Delete</a>
    </li>
  </ul>

Upvotes: 1

dvd
dvd

Reputation: 189

This way ?

.todo-list {
  list-style-type: square;
}

.todo-list__delete {
  display: none;
}

li:hover .todo-list__delete {
  display: inline-block;
}
<ul class="todo-list">
    <li>
      Item 1
      <a class="todo-list__delete" href="#">Delete</a>
    </li>
    <li>
      Item 2
      <a class="todo-list__delete" href="#">Delete</a>
    </li>
    <li>
      Item 3
      <a class="todo-list__delete" href="#">Delete</a>
    </li>
  </ul>

Upvotes: 4

K K
K K

Reputation: 18099

Try adding hover on li element:

.todo-list {
  list-style-type: square;
}

.todo-list__delete {
  display: none;
}

.todo-list li:hover .todo-list__delete {
  display: inline-block;
}

Demo: http://jsfiddle.net/GCu2D/2205/

Upvotes: 1

Julio Feferman
Julio Feferman

Reputation: 2676

Instead of setting your :hover on .todo-list, set it on the li element.

.todo-list {
  list-style-type: square;
}

.todo-list__delete {
  display: none;
}

li:hover .todo-list__delete {
  display: inline-block;
}
<ul class="todo-list">
    <li>
      Item 1
      <a class="todo-list__delete" href="#">Delete</a>
    </li>
    <li>
      Item 2
      <a class="todo-list__delete" href="#">Delete</a>
    </li>
    <li>
      Item 3
      <a class="todo-list__delete" href="#">Delete</a>
    </li>
  </ul>

Upvotes: 1

Related Questions