HTML Css: свойство Hover не работает на Google Icon - PullRequest
Новая
       28

HTML Css: свойство Hover не работает на Google Icon

0 голосов
/ 07 июля 2019

Почему это свойство hover не работает? Предполагается, что он скрыт, однако, когда я нажимаю на область значка, он должен быть видимым. Это застряло в скрытом. 

.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>

Ответы [ 2 ]

4 голосов
/ 07 июля 2019

Вы не можете парить над скрытым элементом. Одним из решений является размещение элемента внутри другого контейнера. 

<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>
0 голосов
/ 08 июля 2019

Одним из способов решения проблемы visibility является использование opacity. 

.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>
...