Показать дочерний элемент при родительском зависании в CSS

Question

Можно ли переключить кнопку удаления, когда мышь наводится на div? Я помню, кто-то показал мне, что это возможно без использования JS.

HTML

<div id="something"> 
    <button class="hide">delete</button> 
</div> 

CSS

#something:hover{ 

} 

Answer 1

если вы в стиле hide как это (страница будет отображаться как если элемент существует, но не видел):

#something .hide{ 
    visibility: hidden; 
} 

вы можете сделать это так, чтобы просто скрыть:

#something:hover .hide{ 
    visibility: visible; 
} 

и если вы стиль это так (страница будет отображаться как если элемент не существует):

#something .hide{ 
    display: none; 
} 

вас может сделать это следующим образом:

#something:hover .hide{ 
    display: block; 
} 

Answer 2

есть два состояния в вашей ситуации, первый из них, когда мышь hover элемента второго, когда он не в результате leave

здесь вы должны направить элемент .hide, когда указатель находится на div, а затем отключите любое событие щелчка, которое может произойти.

фрагмент кода:

div#something:hover .hide{ 

    pointer-events: none; 
    color: GrayText; 
    background-color: #ddd; 
    background: #ddd; 
} 

рабочий пример:

jsfiddle

веселит