JQUERY, CSS, когда поверх LI отображается тег SPAN?

Question

Учитывая следующее:

ul li .main .meta {opacity:0;}

<ul>
<li>  <span class="main">TITLE</span> <span class="meta">meta</span>  </li>
<li>  <span class="main">TITLE 2 </span> <span class="meta">meta</span>  </li>
<li>  <span class="main">TITLE 3</span> <span class="meta">meta</span>  </li>
etc... long list...
</ul>

Какую магию JQUERY я могу сделать так, чтобы всякий раз, когда пользователь наводит курсор на AnyWhere в LI, SPAN с классом = META изменяется на Opacity: 1, и когда пользователь убирает свою мышь с этого LI, мета этого LI возвращается к непрозрачности: 0, а мета нового LI переходит к непрозрачности 1. и т.д ....

Спасибо!

Answer 1

Здесь есть несколько проблем. Самая простая реализация:

$("li").hover(function() {
  $(this).find("span.meta").stop().fadeIn();
}, function() {
  $(this).find("span.meta").stop().fadeOut();
});

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

Примечание: добавление stop() имеет хорошую привычку, иначе вы можете получить непреднамеренные эффекты, если быстро запустите несколько анимаций для одной и той же цели.

Вы можете сделать это и с классами:

$("li").hover(function() {
  $(this).find("span.meta").removeClass("hidden");
}, function() {
  $(this).find("span.meta").addClass("hidden");
});

с:

span.hidden { display: none; }

но вы теряете эффекты постепенного появления и исчезновения таким образом. Однако это решает проблему display: block.

В качестве альтернативы вы можете animate() opacity, но opacity на самом деле не поддерживается в IE. См. непрозрачность :

Примечание о совместимости IE

Если вы хотите, чтобы прозрачность работала во всех IE версии, порядок должен быть:

.opaque {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first!
  filter: alpha(opacity=50);                    // second!
}

Если вы не используете этот заказ, IE8-as-IE7 не применяет прозрачность, хотя IE8 и чистый IE7 делают.

Этот код выглядит примерно так:

$("li").hover(function() {
  $(this).find("span.meta").stop().animate({opacity: 0.0});
}, function() {
  $(this).find("span.meta").stop().animate({opacity: 1.0});
});

Один вопрос, на который вам нужно ответить: вы хотите, чтобы «мета» контент не отображался или просто не был виден? Есть разница Не быть оказанным - это как display: none. Быть невидимым - это как opacity: 0, что потенциально может сбить пользователя с толку, так как текст все равно будет доступен для выбора.

ИМХО, я думаю, вам лучше принять блочную природу дисплея или использовать вместо него всплывающую подсказку (даже богатую подсказку).

Answer 2

Как это:

$('li').hover(
    function() { $('span.meta', this).show(); },
    function() { $('span.meta', this).hide(); }
});

Кстати, правильный способ скрыть элемент в CSS - использовать visibility: hidden (если вы хотите, чтобы он занимал пространство) или display:none (если вы не хотите, чтобы он занимал пространство)

Answer 3

Самая простая реализация - чисто CSS;

ul li .meta {opacity:0;}
ul li:hover .meta {opacity:1;}

Он не будет давать никаких эффектов затухания / затухания, но достигнет вашей цели. Использование отображения или видимости, в зависимости от того, хотите ли вы, чтобы текст влиял на макет страницы, когда он не виден, может быть желательным для прозрачности с точки зрения поддержки браузера.

Answer 4

$('ul li.main').mouseover(function(evt){ $(this).find('span.meta').show(); });

Я думаю ...