Простейший метод опрокидывания / наведения

мне любопытно узнать, что люди думают, что это лучший способ сделать базовое действие-jQuery или CSS?

Я хочу перевернуться с этими состояниями:

  • Normal: абзацы текста в DIV
  • Hover: абзацы текста исчезают, фотография исчезает в том же положении, что и текст
  • OnMouseOut: фотография исчезает, текст исчезает обратно.

DIV & фотография оба известны размеры.

90% эффектов только для CSS, которые я нашел в интернете, предназначены специально для меню, используя спрайты, что не то, что мне нужно, а другие 10% спорят о том, является ли :hover хорошей практикой.

без ролловера, добавленного еще, HTML похож на это:

<div id="box1">
    <p>Pitchfork photo booth, DIY cardigan messenger bag butcher Thundercats tofu you probably haven't heard of them whatever squid VHS put a bird on it. </p>
</div>

CSS-это:

#box1 {
    width:403px;
    height:404px;
    background-image:url('../images/bio_square1.jpg');
    background-repeat:no-repeat;
    color:#fff;
}
6
css html jquery rollover

3 ответов

Как говорили другие, для кросс-браузерной совместимости jQuery-это путь. Но если вы хотите просто CSS, вот быстрый и грязный вариант CSS3 с использованием переходов:http://jsfiddle.net/wkhQA/2/

Edit: из-за лени я включил только префикс webkit для переходов. Поэтому я думаю, протестируйте его в Chrome или Safari. Извинения.

0

Я обычно прибегаю к jquery, если есть необходимость исчезать в/из элемента.

мой HTML будет примерно так:

<div id="box">

   <div class="box-img">

         <img src="image.jpg"/>

   </div>

   <div class="box-text">

         Lorem ipsum

   </div>

</div>

после этого мой CSS будет идти что-то вроде:

#box{
   width:500px;
   height:500px;
   padding:0;
}

   .box-img{
       position:absolute;
       opacity:0;
   }

   .box-text{
       position:absolute;
   }

и в конце концов, я, вероятно, буду использовать библиотеку jquery .mouseover() or .при наведении():

$("#box").hover(
  function () {
    $(".box-img").fadeTo("100,1");
    $(".box-text").fadeTo("100,0");
  }, 
  function () {
    $(".box-img").fadeTo("100,0");
    $(".box-text").fadeTo("100,1");
  }
);

это может быть не оптимальный метод, но я полагаю, что грубая идея того, что возможно, где-то там.

вы можете увидеть .hover () в действии на jQuery API. В демо есть живой пример чего-то похожего на то, что вы можете искать, и он использует другой метод.

надеюсь, что это помогает! =)

2

для кросс-браузерной совместимости, jQuery-это путь. Кроме того, что вы хотите, звучит немного сложнее, чем просто изменение стиля при наведении. Например, вы привязываете выцветание фотографии к концу выцветания абзаца. Нет никакого способа сделать это в чистом CSS.

0