div hover show button / эффект ссылки - PullRequest
Новая
       14

div hover show button / эффект ссылки

1 голос
/ 03 мая 2011

вот эффект: когда я перемещаю свою мышь в div, появляется ссылка для удаления. когда я убираю мышь, удаляется ссылка удаления.

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

enter image description here

enter image description here

Ответы [ 4 ]

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

В зависимости от того, насколько вы прогрессивны (поддержка IE> 6), вы можете сделать это в CSS, создав селектор с псевдоклассом hover родительского элемента. Используя ту же разметку из ваших скриншотов: 

a.deleteFiddle {
  display: none;
}

div.lfiCont:hover a.deleteFiddle {
  display: inline;
}

Посмотри в действии - http://jsfiddle.net/7msZA/

Если вам нужны эффекты или проблемы с кроссбраузерностью, тогда JavaScript является альтернативой. Тем не менее, в наши дни CSS вполне способен обрабатывать такого рода UX.

2 голосов
/ 03 мая 2011

Как вы видите на своих изображениях, это, вероятно, сделано с помощью jQuery, библиотеки JavaScript.

Код довольно прост:

HTML 

<div>
    Foo
    <span class="delete">Delete</span>
</div>

JavaScript : 

$('div').hover(function() {
   $(this).find('.delete').show();
}, function() {
   $(this).find('.delete').hide();
});

CSS 

.delete {
    position: absolute;
    top: 0px;
    right: 0px;
    color: red;

    display: none;
}

div {
    padding: 50px;
    background-color: rgb(200, 200, 255);
    position: relative;
}

Демо : http://jsfiddle.net/euChd/3/

1 голос
/ 03 мая 2011

Вы можете сделать это с помощью Javascript, я бы предложил JQuery . Эта страница JQuery содержит пример изменения стилей, основанных на наведении.

Пример кода с этой страницы: 

<!DOCTYPE html>
<html>
<head>
  <style>
  ul { margin-left:20px; color:blue; }
  li { cursor:default; }
  span { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-git.js"></script>
</head>
<body>
  <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li class='fade'>Chips</li>

    <li class='fade'>Socks</li>
  </ul>
<script>
$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  }, 
  function () {
    $(this).find("span:last").remove();
  }
);



//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});

</script>

</body>
</html>
1 голос
/ 03 мая 2011

Скорее всего, это делается через Javascript или jquery.

Примером того, как это делается, может быть что-то вроде этого: 

document.getElementById('div1').onmouseover = function() { 
    document.getElementById('div1').style.display = "inline";
}
...