Блог

Я пытаюсь создать несколько миниатюр с исчезновением при наведении в стиле jquery. Мне удалось выполнять наведение курсора на изображения, но есть проблема. При наведении курсора пользователя я хочу, чтобы отображался текст, чего я добился с помощью CSS, проблема в том, что когда пользователь наводит курсор на текст, изображение снова исчезает. Мне было интересно, как я мог бы сделать так, чтобы изображение продолжало оставаться размытым, одновременно наведя курсор на текст. Я также не хочу, чтобы текст становился блеклым, я попытался просто переключиться на класс thumb в разделе script.

 <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;}
  

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

 $(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); 
        }
    });
});
  

С помощью тех же 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
    });
});
  

Вы можете достичь этого только с помощью 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;}