Html Css: Hover Property not Working on Google Icon

Question

How come this hover property is not working? It is supposed to be hidden, however when I click over the icon area, it is supposed to be visible. This is stuck at hidden.

.testdelete {
    display: inline-block;
    font-family: Material Icons;
    visibility: hidden;
}


.testdelete:hover .testdelete {
    visibility: visible;
}

.testdelete:not(hover) .testdelete {
    visibility: hidden;
}


<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div class="testdelete">delete</div>

score 3 · Accepted Answer · answered Jul 07 '19 at 19:57

You cannot hover over a hidden element. One solution is to nest the element inside another container.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<style type="text/css">

.testdelete .insideElement{
    display: inline-block;
    font-family: Material Icons;
 visibility: hidden;
}

.testdelete:hover .insideElement {
 visibility: visible;
}

.testdelete:not(hover) .insideElement {
 visibility: hidden;    
}

</style>

<html> 
<head>
<div class="testdelete">
<div class="insideElement">delete</div>
</div>
</head>
</html>

score -1 · Answer 2 · answered Jul 08 '19 at 08:25

One way around the visibility issue is to use opacity instead.

.testdelete {
  display: inline-block;
  font-family: Material Icons;
  opacity: 0;
}

.testdelete:hover {
  opacity: 1;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div class="testdelete">delete</div>

Html Css: Hover Property not Working on Google Icon

2 Answers2