CODEWITHSUNDEEP
htmlcss
alsuelo
alsuelo

Reputation: 59

Show images when hover a button

I want to hide the images when nothing is selected or hover, and show the images when hover or selected the button. The images are functions so i can't to put as background images.

I think maybe with visibility: hidden and visibility:display in hover and selected could be work but i don't have success yet.

No jquery or javascript, maybe is possible with just css.

input[type="checkbox"]:focus + label {
  background-color:#16bdcf;
}

#template:hover , #template:focus #template.selected{
  background-color:#16bdcf;
}

#template.selected{
  /* background-color:red; */
  color: #fff;
}
#template:hover * , #template:focus * {
  background-color:#16bdcf;
  color: #fff;
}

#template > h3 > input[type="checkbox"] {
  margin: 0px 10px 0px 0px;
}
#template {
  width: 100%;
}
<li ng-repeat="contactlist in contactlists | filter:query" class="ng-scope" style="">
  <button id="template" ng-click="open(contactlist)">
    <h5 class="ng-binding">2 days ago</h5>
    <h3 class="ng-binding"><input type="checkbox">name</h3>
    <span><img class="swhite" src="images/Share_white.png"></span>
    <span ng-click="deleteContactList(contactlist)"><img class="twhite" src="images/Trash_white.png"></span>
    <p class="ng-binding">5 CONTACTS</p>
  </button>
</li>

Upvotes: 0

Views: 127

Answers (1)

Patrick Moore
Patrick Moore

Reputation: 13344

You can hide the spans (which contain img) by default:

#template span {  // hide at default
    display: none; 
}

Then show on the various states of #template you desire:

#template.selected span, // show on state change
#template:hover span, 
#template:focus span, 
#template.selected span { 
    display: block; 
}

If this breaks your layout, you can use visibility property instead:

#template span {  // hide at default
    visibility: hidden;
}

Then show on the various states of #template you desire:

#template.selected span, // show on state change
#template:hover span, 
#template:focus span, 
#template.selected span { 
    visibility: visible;
}

Full snippet block...

input[type="checkbox"]:focus + label {
background-color:#16bdcf;
    }

#template span { display: none; } // hide at default

#template:hover , #template:focus #template.selected{
    background-color:#16bdcf;
}

#template.selected span, #template:hover span, #template:focus span, #template.selected span { display: block; } // show on state change

#template.selected{
    /* background-color:red; */
    color: #fff;
}
#template:hover * , #template:focus * {
    background-color:#16bdcf;
    color: #fff;
}

#template > h3 > input[type="checkbox"] {
    margin: 0px 10px 0px 0px;
}
#template {
    width: 100%;
}
<li ng-repeat="contactlist in contactlists | filter:query" class="ng-scope" style="">
          <button id="template" ng-click="open(contactlist)">
            <h5 class="ng-binding">2 days ago</h5>
            <h3 class="ng-binding"><input type="checkbox">name</h3>
            <span><img class="swhite" src="images/Share_white.png"></span>
             <span ng-click="deleteContactList(contactlist)"><img class="twhite" src="images/Trash_white.png"></span>
            <p class="ng-binding">5 CONTACTS</p>
           </button>
        </li>

Upvotes: 1

Related Questions