CSS переход div при наведении мыши только на часть div? - PullRequest
Новая
       9

CSS переход div при наведении мыши только на часть div?

3 голосов
/ 09 октября 2011

Дайте мне посмотреть, насколько хорошо я могу это объяснить.Я работаю над индексом на веб-сайте, который находится в div, который выталкивается со страницы через css margin, и отображается только его часть.Когда вы наводите курсор на часть, которая отображается, остальное скользит вниз в поле зрения.Это отлично работает.У меня уже есть эффект перехода для слайда изменения поля, а также изменение цвета фона с помощью rgba.Это выглядит очень красиво.

Мой вопрос: индекс имеет ширину около 500 пикселей, а видимая часть до зависания достигает 70 пикселей.Так что это довольно большая область экрана для людей, которые случайно ловят при наведении курсора мыши, если они не пытаются отобразить индексный div.Есть ли какой-то способ, которым я могу заставить только часть первоначально видимой части div активировать анимацию перехода при наведении, чтобы увидеть полный div?Или, может быть, каким-то образом я могу прикрепить меньший div к этому как своего рода вкладку, которая будет сбивать больший div и сам по себе с помощью перехода при наведении курсора?

Надеюсь, это имеет смысл.Спасибо.

Вот основная идея текущего кода: 

#index {
    position:fixed;
    background:rgba(0,0,0,0.3);
    width:500px;
    height:500px;
    top:0;
    left:50%;
    margin:-430px 0 0 -500px;
    transition:0.5s;
    -moz-transition:0.5s;
    -webkit-transition:0.5s;
    -o-transition:0.5s;}

#index:hover {
    background:rgba(0,0,0,0.8);
    margin:0 0 0 -500px;}

Ответы [ 2 ]

3 голосов
/ 09 октября 2011

jsFiddle:

http://jsfiddle.net/wZ8zX/1/

html: 

<div id="slider"><div id="trigger"><br></div></div>

js: 

$('#trigger').hover(function(){
    $(this).parent().animate({'top':0},500); 
});
$('#slider').mouseleave(function(){
    $(this).animate({'top':-150},500); 
});

решение без jQuery:
http://jsfiddle.net/wZ8zX/3/

извините, я обычно просто просматриваю вопросы jquery, поэтому я не проверял теги lol

1 голос
/ 09 октября 2011

Используя только CSS, вы можете использовать другой блок или псевдоэлемент для наложения частей блока, где вы не хотите иметь переход, а затем, после наведения курсора, сделать z-index для элемента с переходом, большим, чем оверлейный элемент, поэтому все его содержимое будет доступно.

Вот скрипка с примером: http://jsfiddle.net/kizu/Y3px6/1/

...