Jquery наведите курсор на миниатюры - PullRequest
Новая
       14

Jquery наведите курсор на миниатюры

1 голос
/ 13 ноября 2011

Я пытаюсь создать несколько миниатюр в стиле JQuery. Мне удалось навести курсор на изображение, но есть проблема. Когда пользователь наводит курсор мыши, я хочу, чтобы появился какой-то текст, чего я достиг с помощью CSS, проблема в том, что когда пользователь наводит курсор на текст, изображение исчезает. Мне было интересно, как я могу сделать так, чтобы изображение продолжало оставайся угасшим, а также нависать над текстом. Я также не хочу, чтобы текст стал блеклым, я попытался просто переключиться на класс большого пальца в разделе сценария. 

<script>
$(document).ready(function(){
    $(".thumb img").fadeTo("fast", 1.0); // This sets the opacity of the thumbs to fade down to 60% when the page loads

    $(".thumb img").hover(function(){
        $(this).fadeTo("fast", 0.3); // This should set the opacity to 100% on hover
    },function(){
        $(this).fadeTo("fast", 1.0); // This should set the opacity back to 60% on mouseout
    });


});
</script>

HTML 

<div class="thumb">
 <a href="#"><img src="images/hooty_thumb.png" width="250" height="224"/></a>
 <div class="title">
<h1 class="din"><a href="#">TITLE HERE</a></h1>
<h2><a href="#">Branding, Print, Web</a></h2>
<h2><a href="#">2011</a></h2></div></div>

CSS: 

.thumb {float: left; background-color: #FFF; z-index: 1; width: 250px; height: 225px; margin-right: 27px; margin-bottom: 45px; display: inline-block; *display:inline; *zoom: 1; position: relative;}
.thumb .title{position:absolute; width: 250px;  top: 40%; left:0%; text-align: center; display: none; z-index: -1;}
.thumb:hover .title{display: inline; z-index: 1;}
.thumb .title h1{color:#00F;}

Ответы [ 3 ]

1 голос
/ 14 ноября 2011

Вот, пожалуйста, вам нужно было подняться на один уровень вверх и присоединить события опрокидывания к родительскому элементу, затем пройти DOM к изображению и установить его непрозрачность. * Примечание: $ (document) .ready (function () {}) совпадает с $ (function () {}) 

$(function(){
    $(".thumb img").fadeTo("fast", 1.0); 

    $(".thumb").bind({
        mouseenter:function(){
            $('img', this).fadeTo("fast", 0.3);
        },mouseleave: function(){
            $('img', this).fadeTo("fast", 1.0); 
        }
    });
});
1 голос
/ 14 ноября 2011

С тем же HTML и CSS я настраиваю привязку события от thumb img до thumb, чтобы событие происходило во всем блоке изображения.В обратном вызове события я использовал контекстный селектор jQuery , чтобы обнаружить элемент img и выполнить эффект затухания / затухания.

Эффект можно увидеть здесь,http://jsfiddle.net/yangchenyun/5pnQA/

$(document).ready(function() {
    $(".thumb img").fadeTo("fast", 1.0); // This sets the opacity of the thumbs to fade down to 60% when the page loads
    $(".thumb").hover(function() {
        $('img', this).fadeTo("fast", 0.3); // This should set the opacity to 100% on hover
    }, function() {
        $('img', this).fadeTo("fast", 1.0); // This should set the opacity back to 60% on mouseout
    });
});
0 голосов
/ 14 ноября 2011

Вы можете добиться этого только с помощью HTML и CSS, ваша страница будет более эффективной. HTML5 

<a href="#" class="thumb">
    <img src="images/hooty_thumb.png" width="250" height="224"/>
    <strong>TITLE HERE</strong>
    <em>Branding, Print, Web</em>
    <time>2011</time>
</a>

CSS 

a.thumb{float:left; position:relative; background:#FFF; z-index:1; width:250px; height:225px; text-decoration:none; margin:0 27px 45px;}
a.thumb img{opacity:0.6; -webkit-transition:opacity 0.2s linear; -moz-transition:opacity 0.2s linear;}
a.thumb:hover img{opacity:1;}
a.thumb>strong, .thumb>em, .thumb>time{opacity:0; -webkit-transition:opacity 0.2s linear; -moz-transition:opacity 0.2s linear;}
a.thumb:hover>strong, .thumb:hover>em, .thumb:hover>time{opacity:1;}
...