Как правильно пометить текст при наведении курсора с помощью jquery - PullRequest
Новая
       28

Как правильно пометить текст при наведении курсора с помощью jquery

0 голосов
/ 25 мая 2011

http://jsfiddle.net/mplungjan/8wf5E/ (работает сейчас - с помощью .hover ())

Следующее, очевидно, дает сбой при наведении курсора на div с исчезающим эффектом, поскольку это вызывает указатель мыши и ввод. Мне нужен только фактический текст, чтобы появляться и исчезать, div-обертки предназначены только для локализации и отладки. Решение без позиции: абсолютное предпочтение 

<div id="container">
  <div id="one" class="fade">One</div>
  <div id="two" class="fade">Two</div>
</div>   

$(document).ready(function() {
  $("#container").mouseover(function () {
    $("#one").fadeOut("slow");
    $("#two").fadeIn("slow");
  }).mouseout(function () {
    $("#two").fadeOut("slow");
    $("#one").fadeIn("slow");
  });;
}); 

div { margin:3px; width:80px; height:80px; float:left; }
div#container { width: 100px; height:100px; border:1px solid black}
div#one { position:absolute; border:1px solid red;}
div#two { position:absolute; border:1px solid green; display:none; }

Ответы [ 3 ]

4 голосов
/ 25 мая 2011

Я бы порекомендовал использовать функцию hover для такого рода функций ... 

$(document).ready(function() {
  $("#container").hover(
    function(e) { 
      $("#one").fadeOut("slow");
      $("#two").fadeIn("slow");
    },
    function(e) {
      $("#two").fadeOut("slow");
      $("#one").fadeIn("slow");      
    }
  );
});

Это исправляет эту конкретную проблему.

3 голосов
/ 25 мая 2011

Использование mouseleave() вместо mouseout() выглядит лучше.
Смотри здесь .

3 голосов
/ 25 мая 2011

Я думаю, что вы ищете этот код jQuery: 

$(document).ready(function() {
  $("#container").mouseenter(function () {
    $("#one").fadeOut("slow");
    $("#two").fadeIn("slow");
  }).mouseleave(function () {
    $("#two").fadeOut("slow");
    $("#one").fadeIn("slow");
  });;
});

РЕДАКТИРОВАТЬ: Вы также можете сделать это, используя немного магии CSS3;) 

div { margin:3px; width:80px; height:80px; float:left; }
div#container { width: 100px; height:100px; border:1px solid black}
div#one { position:absolute; border:1px solid red;-webkit-transition:opacity 0.5s ease-in-out;}
div#two { position:absolute; border:1px solid green; opacity:0;-webkit-transition:opacity 0.5s ease-in-out; }

div#container:hover #two{
 opacity:1;}
div#container:hover #one{
 opacity:0;}

=> http://jsfiddle.net/3WZKx/1/

...