CSS - display: none on hover self

Я пытаюсь создать эффект, если пользователь наводится на элемент, элемент исчезает. Я пробовал код ниже, но кажется, что display:none; разбивает CSS. Мне интересно, почему мой CSS не работает, и как я разрешу свою проблему.CSS - display: none on hover self

http://jsfiddle.net/2c42U/

<div class="foo">text</div> 

.foo:hover { 
    color: red; 
    display: none; 
}

источник

2013-03-12 Jon

Вы не можете скрыть элемент при наведении с помощью 'display: none'. Это не работает, потому что это не имеет смысла. – dfsq

Вы имеете в виду, что вы не можете использовать 'display: none;' для себя? – Jon

Вы можете, но это не сработает. просто подумайте, что должно произойти дальше? Div исчез, если он появится снова, потому что это не longge hovered? Вот почему он просто ничего не делает. – dfsq

Попробуйте изменить непрозрачность элемента вместо: http://jsfiddle.net/XtmVQ/

.foo:hover { 
    opacity:0; 
}

источник

2013-03-12 20:02:52

Сладкий! Я так зациклен на попытке скрыть элемент, о котором я забыл, просто заставляя пользователя думать, что элемент был скрыт! – Jon

@ icu222much Убедитесь, что вы проверяете это в разных версиях IE. Для этого требуется «альфа-непрозрачность» вместо непрозрачности. – VoidKing

-2

я думаю, что CSS не будет работать. Использование JQuery

UPDATE

ооо, мой плохой. CSS будет работать, но JQuery будет иметь лучший эффект

 $('#outer').mouseenter(function() { 
     $("#outer").hide(); 
    }); $('#outer').mouseleave(function() { 
     $("#outer").show(); 
    });

FIXED

 $('#outer').mouseenter(function() { 
     $("#outer").slideUp(); 
    }); $('#outer').mouseleave(function() { 
     $("#outer").slideDown(); 
    });

источник

2013-03-12 20:02:30

WRT «css будет работать, но jquery будет иметь лучший эффект» - как это лучший эффект? –

.slideUp() .slideDown() .slideToggle() - это то, что я имею в виду, я запутался в grr. извините –

Что такое '# outer'? Кроме того, даже ваше обновленное решение ведет себя странно: http://jsfiddle.net/XtmVQ/3/ –

попробовать это вместо дисплея: нет

visibility:hidden

источник

2013-03-12 20:04:05 TrippinBilly

Это тоже работает :) – Jon

Попробуйте это:

.foo:hover { 
    opacity: 0; 
}

Что ваше окончательное намерение для этого?

источник

2013-03-12 20:04:23

как сказал @Richard, используйте непрозрачность

также, чтобы быть в обратном направлении т.е. сделать следующим образом:

filter:alpha(opacity=0); /* For IE8 and earlier */

и вы также можете добавить переход:

transition: 0.5s

так, что это не мгновенно.

источник

2013-03-12 20:06:28

Вы можете сделать то, что предложили другие, использовать opacity: 0; или visibility:hidden;, но если вы должны быть скрыты от потока страницы. Затем выполните следующие действия:

Используйте CSS, как это:

.hidden{ 
    display: none !important; 
}

Вы можете использовать класс hidden и применить его к любому элементу, чтобы скрыть его. Для требуемого поведения наведения вам потребуется JavaScript/jQuery для применения имени класса. См. http://jsfiddle.net/rkH7F/

источник

2013-03-12 20:09:03 sweetamylase

CSS - display: none on hover self

ответ

Смежные вопросы