CODEWITHSUNDEEP
htmlcsscss-selectors
ksernow
ksernow

Reputation: 714

CSS how to make div visible on focus not working

I am trying to make div element visible on focus but it is not working. If i change focus to hover it works

JSFIDDLE https://jsfiddle.net/9bo81jyy/8/

HTML 

<div class="test">
  <nav class="nav">
    <ul class="navtabs">
      <li>
        <a href="showMe/1">
          <div class= "inside">
            <div tabindex="0" class="delete">
              <button tabindex="-1" class="fa-times-circle"> </button>
            </div>
          </div>
        </a>
      </li>
    </ul>
  </nav>
</div>

CSS

.nav > ul.navtabs > li > a > div:focus .delete{
  display: inline !important;
}
.delete{
  display: none;
}

Upvotes: 1

Views: 5641

Answers (2)

satyajit rout
satyajit rout

Reputation: 1651

only a tag ll be focousable so use below code it'll work...i have updated the jsfiddle

.nav > ul.navtabs > li > a:focus .delete{
  border: 1px solid red;
  display: inline;
}

Upvotes: 3

Intervalia
Intervalia

Reputation: 10975

This <div tabindex="0" class="delete"> is not available in the DOM because of this CSS:

.delete{
  display: none;
}

So that <div> can never be clicked on and can never receive focus.

Instead try focus on the <a> tag:

ul.navtabs a:focus .delete{
  display: inline !important;
}

And remove the tabindex="0" on the <div>.

Upvotes: 1

Related Questions