Foreach элемент парить отличается фон

Я работаю над зависания анимации, вот мой кодForeach элемент парить отличается фон

.blocks { 
 
    position: relative; 
 
} 
 

 
.block { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: block; 
 
} 
 

 
.blocks .item-1 { 
 
    background-color: red; 
 
} 
 
.blocks .item-2 { 
 
    background-color: blue; 
 
} 
 
.blocks .item-3 { 
 
    background-color: yellow; 
 
} 
 
.blocks .item-4 { 
 
    background-color: black; 
 
}

<div class="menu"> 
 
    <ul> 
 
     <li class="item-1">Hello</li> 
 
     <li class="item-2">Hi</li> 
 
     <li class="item-3">How are</li> 
 
     <li class="item-4">You today</li> 
 
    </ul> 
 
</div> 
 

 
<div class="blocks"> 
 
    <div class="block item-1"></div> 
 
    <div class="block item-2"></div> 
 
    <div class="block item-3"></div> 
 
    <div class="block item-4"></div> 
 
</div>

Я хочу, например, когда вы зависания с помощью мыши <li class="item-2">Hi</li>, то <div class="block"></div> с тем же дисплеем класса, а остальные скрываются.

Благодарим за помощь!

источник

2015-11-11 Corentin Branquet

Пробовали ли вы что-нибудь? – laszlokiss88

Вы должны использовать jquery или javascript для своей цели. – Alex

Вот пример JQuery:

$('.menu li').mouseenter(function(){ 
    $('.blocks .block').hide(); 
    $('.blocks .block.' + $(this).attr('class')).show(); 
}).mouseleave(function(){ 
    $('.blocks .block').hide(); 
});

DEMO

источник

2015-11-11 15:05:50

Простые немного JQuery скрипта, чтобы зарегистрировать событие парения, скрыть все другие блоки и показывают в настоящее время зависли классы элемента является всем Thats необходимым ,

$(document).ready(function() { 
 
    $('.menu li').hover(function() { 
 
    $('.blocks .block').hide(); 
 
    $('.blocks .' + $(this).attr('class')).fadeIn(); 
 
    }); 
 
});

.blocks { 
 
    position: relative; 
 
} 
 
.block { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: block; 
 
} 
 
.blocks .item-1 { 
 
    background-color: red; 
 
} 
 
.blocks .item-2 { 
 
    background-color: blue; 
 
} 
 
.blocks .item-3 { 
 
    background-color: yellow; 
 
} 
 
.blocks .item-4 { 
 
    background-color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menu"> 
 
    <ul> 
 
    <li class="item-1">Hello</li> 
 
    <li class="item-2">Hi</li> 
 
    <li class="item-3">How are</li> 
 
    <li class="item-4">You today</li> 
 
    </ul> 
 
</div> 
 

 
<div class="blocks"> 
 
    <div class="block item-1"></div> 
 
    <div class="block item-2"></div> 
 
    <div class="block item-3"></div> 
 
    <div class="block item-4"></div> 
 
</div>

источник

2015-11-11 15:07:01 Stewartside

Я думаю, вы могли бы добавить 'stop()' перед анимацией. Не знаю, только ли это меня, но это бесконечные переходы вызывает у меня головокружение: P – Clyff

'hover' запускается несколько раз, если мышь перемещается поверх элемента. Я думаю, что лучше использовать' mouseenter' для этого –

Плакат может захотеть иметь текст в '' и запускать анимацию на нем, чтобы убедиться, что он изменяется только при наведении курсора на текст. – Cory

Попробуйте этот JQuery код:

$(".menu li").mouseenter(function(){ 
    $('.blocks .block').hide(); 
    $(".blocks").find("."+$(this).attr('class')).show(); 
}).mouseleave(function(){ 
    $('.blocks .block').hide(); 
});

Надеется, что это помогает ..

источник

2015-11-11 15:13:32

Foreach элемент парить отличается фон

ответ

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