display element in hover-CodePudding

I want my element <a> to be hidden and when hover within the div, display will be available.

I want my element <a> to have a hover effect that it will be available upon hover.

<div >
  <ul>
    {% for i in list %}

    <li >
      <div >
        <form  action="{{url_for('to_do_list')}}" method="post">
          <input  type="checkbox" id=list-{{i.id}} name=list-{{i.id}} value="ongoing" onclick="toggle_check()">
          <label  for=list-{{i.id}}> {{i.task}}</label>
          <a href=""></a>
          <a href="#"><i  id="delete-button"></i></a>
          <br>
        </form>
      </div>


    </li>

CodePudding user response：

You can do it by targeting the :hover pseudo-class, here I've chosen the parent <div>, .div-for-listing

.div-for-listing a {
  display: none
}

.div-for-listing:hover a {
  display: block
}

<div >
  <ul>
    {% for i in list %}

    <li >
      <div >
        <form  action="{{url_for('to_do_list')}}" method="post">
          <input  type="checkbox" id=list-{{i.id}} name=list-{{i.id}} value="ongoing" onclick="toggle_check()">
          <label  for=list-{{i.id}}> {{i.task}}</label>
          <a href="">Link</a>
          <a href="#"><i  id="delete-button"></i></a>
          <br>
        </form>
      </div>


    </li>
  </ul>
</div>