Hover ДИВ, отображение текста и непрозрачности

я показываю 6 изображений:Hover ДИВ, отображение текста и непрозрачности

HTML:

<div class="row-project"> 
    <div style="position:relative;"> 
     <div class="hololens highlight"></div> 
     <h3 style="right:0px;left:0px; top:94px; margin:auto;">Hololens</h3> 
    </div> 
    <div style="position:relative"> 
     <div class="cinetik highlight"></div> 
     <h3 style="right:0px;left:0px; top:94px; margin:auto;">Hololens</h3> 
    </div> 
    <div style="position:relative"> 
     <div class="fly360 highlight"></div> 
    </div> 
</div> 
<div class="row-project"> 
    <div style="position:relative"> 
     <div class="train highlight"></div> 
     <h3 style="right:0px;left:0px; top:94px; margin:auto;">Train</h3> 
    </div> 
    <div style="position:relative"> 
     <div class="avion highlight"></div> 
     <h3 style="right:0px;left:0px; top:94px; margin:auto;">Rafale</h3> 
    </div> 
    <div style="position:relative"> 
     <div class="cinema highlight"></div> 
     <h3 style="right:0px;left:0px; top:94px; margin:auto;">Cinéma</h3> 
    </div> 
</div>

CSS:

.row-project{ 
    height: 250px; 
    width: 1200px; 
    position: relative; 
    display: flex; 
    @media screen and (max-width: 830px) { 
     width: 400px; 
     height: 750px; 
     flex-direction:column; 
    } 
    @media screen and (max-width: 350px) { 
     width: 250px; 
     height: 469px; 
    } 
    margin: auto; 
    div{ 
     width: 100%; 
     height: 100%; 
     text-align: center; 
     display: flex; 

    } 
    h3{ 
     margin: auto; 
     font-family: $theme-font-light; 
     font-size: 40px; 
     position: absolute; 
     cursor: default; 
     display: none; 
     } 
    } 
    .hololens{ 
     background: url('../img/hololens.jpg') no-repeat center center; 
     border-radius: 15px; 
     @media screen and (max-width: 350px) { 
      background-size: 250px; 
     } 

    } 
    .cinetik{ 
     background: url('../img/cinetik-homme.jpg') no-repeat center center; 
     border-radius: 15px; 
     @media screen and (max-width: 350px) { 
      background-size: 250px; 
     } 
    } 
    .fly360{ 
     background: url('../img/360fly.jpg') no-repeat center center; 
     border-radius: 15px; 
     @media screen and (max-width: 350px) { 
      background-size: 250px; 
     } 
    } 
    .train{ 
     background: url('../img/train.jpg') no-repeat center center; 
     border-radius: 15px; 
     @media screen and (max-width: 350px) { 
      background-size: 250px; 
     } 
    } 
    .avion{ 
     background: url('../img/avion.jpg') no-repeat center center; 
     border-radius: 15px; 
     @media screen and (max-width: 350px) { 
      background-size: 250px; 
     } 
    } 
    .cinema{ 
     background: url('../img/cinema.jpg') no-repeat center center; 
     border-radius: 15px; 
     @media screen and (max-width: 350px) { 
      background-size: 250px; 
     } 
    }

Я пытаюсь здесь, чтобы реализовать скрипт, который говорит, что изображение имеет непрозрачность до 0,3 и отображает текст на изображении.

Вот что я получил:

$('h3').hover(function(){ 
    $(this).siblings("div").css({ 
     opacity: '0.3', transition : "0.3s" 
    }); 
    $(this).css({display : "block"}); 
}); 

$("h3").mouseleave(function(){ 
    $(this).siblings("div").css({ 
     opacity: '1', transition : "0.3s" 
    }); 
    $(this).css({display : "block"}); 
}); 

$('.highlight').hover(function(){ 
    $(this).css({ 
     opacity: '0.3', transition : "0.3s" 
    }); 
    $(this).siblings("h3").css({display : "block"}); 
}); 

$(".highlight").mouseleave(function(){ 
    alert("ok"); 
    $(this).css({ 
     opacity: '1', transition : "0.3s" 
    }); 
    $(this).siblings("h3").css({display : "none"}); 
});

Это почти работает, но единственная ошибка в том, что, когда я оставить мышь на изображение и непосредственно перейти на другой h3 тег, он сохраняет предыдущую h3 завис тег отображается. В противном случае все работает отлично. Решение должно состоять в том, чтобы иметь класс «highlight», характерный для каждого div, но это слишком сильно заставляет мой сценарий jQuery

У вас есть идея, как исправить это? Или у вас есть предложения, как сделать это чище?

Спасибо.

источник

2016-06-27 Baptiste Arnaud

предложения ... использовать только CSS не Jquery – DaniP

Для этого вам не нужен javascript. Вместо этого используйте псевдо-селектор: hover из CSS.

Смотрите эту JSFiddle для простого примера: https://jsfiddle.net/10aq644s/

HTML:

<div> 
    <div class="container"> 
    <img src="http://placehold.it/300x300"> 
    <h3>Hello World !</h3> 
    </div> 
    <div class="container"> 
    <img src="http://placehold.it/300x300"> 
    <h3>Hello World !</h3> 
    </div> 
</div>

CSS:

.container { 
    position: relative; 
    width: 300px; 
} 

.container 
    > img { 
    border: solid 1px red; 
    } 
.container 
    > h3 { 
    display: block; 
    visibility: hidden; 
    top: 0; 
    position: absolute; 
    width: 300px; 
    text-align: center; 
    } 
.container:hover 
    > h3 { 
    visibility: visible; 
    }

источник

2016-06-27 15:21:34 xurei

непрозрачности отсутствует в вашем CSS (просто, чтобы быть в комплекте). Мне любопытно: почему вы дополнительно использовали видимость вместо отображения только для переключения элементов h3? – Eytibi

Вау, CSS настолько мощный. Полностью работает! Спасибо друг. Я добавил непрозрачные переходы вместо видимости. –

@ Eytibi Я написал, что на спешке: -P видимость: скрытый/видимый или дисплей: none/block достигают такого же результата здесь. – xurei

решение JQuery. В HTML я переехал class="highlight" родителю div:

<div class="row-project"> 
    <div style="position:relative;" class="highlight"> 
     <div class="hololens"></div> 
     <h3 style="right:0px;left:0px; top:94px; margin:auto;">Hololens</h3> 
    </div> 
    <div style="position:relative" class="highlight"> 
     <div class="cinetik"></div> 
     <h3 style="right:0px;left:0px; top:94px; margin:auto;">Hololens</h3> 
    </div> 
    <div style="position:relative" class="highlight"> 
     <div class="fly360"></div> 
    </div> 
</div> 
<div class="row-project"> 
    <div style="position:relative" class="highlight"> 
     <div class="train"></div> 
     <h3 style="right:0px;left:0px; top:94px; margin:auto;">Train</h3> 
    </div> 
    <div style="position:relative" class="highlight"> 
     <div class="avion"></div> 
     <h3 style="right:0px;left:0px; top:94px; margin:auto;">Rafale</h3> 
    </div> 
    <div style="position:relative" class="highlight"> 
     <div class="cinema"></div> 
     <h3 style="right:0px;left:0px; top:94px; margin:auto;">Cinema</h3> 
    </div> 
</div>

JavaScript:

$('.highlight').hover(function() { 
    var $this = $(this); 
    $this.find('div').css({ 
     opacity: '0.3', transition : "0.3s" 
    }); 
    $this.find('h3').css({display : "block"}); 
}, function() { 
    var $this = $(this); 
    $this.find('div').css({ 
     opacity: '1', transition : "0.3s" 
    }); 
    $this.find('h3').css({display : "none"}); 
});

источник

2016-06-27 15:59:19 spirit

Hover ДИВ, отображение текста и непрозрачности

ответ

Смежные вопросы