Как перейти на: ссылки на основе родительского div: hover

У меня есть меню в левом нижнем углу, что у меня есть несколько переходов CSS3 между: link и a: hover внутри этого конкретного div, включая цвет, высоту строки, букву -spacing и text-shadow. У меня также есть переход между div.floating-menu и div.floating-menu, который влияет на высоту строки для всего div, эффективно сворачивая это плавающее меню в нижней части страницы.Как перейти на: ссылки на основе родительского div: hover

У меня есть только ссылки и h1 внутри этого div.

Я хочу, чтобы меню было свернуто, а ссылки были прозрачными (черные тоже работают), а затем разверните палец над div и сделайте переход ссылок непрозрачным (или обратно к белому).

Кажется, я не могу получить ссылки, чтобы исчезнуть, когда меню рушится. Есть ли способ сделать это?

Вот HTML и CSS для меню:

<div class="floating-menu"> 
<br /><br /> 
<a href="#">index</a> 
<a href="#">search</a> 
<a href="#">help</a> 
<a href="#">members</a> 
<a href="#">calendar</a> 
<br /> 
<h1>menu</h1> 
<br/> 
</div>

CSS:

div.floating-menu { 
position: fixed; 
bottom: 10px; 
left: 10px; 
width: 120px; 
z-index: 100; 
padding-left: 10px; 
line-height: 0px; 
transition: all 1s; 
opacity: 1; 
} 
div.floating-menu:hover { 
line-height: 9px; 
opacity: 1; 
} 
div.floating-menu a, div.floating-menu h1 { 
display: block; 
margin: 0 0.5em; 
} 
div.floating-menu a:link, div.floating-menu a:visited { 
color: #888888; 
letter-spacing: -1px; 
transition: all 1s; 
text-shadow: 0 0 2px #cccccc; 
opacity: 1; 

} 
div.floating-menu a:hover { 
letter-spacing: 1px; 
color: #ffffff; 
color: #cccccc; 
text-shadow: 0 0 2px #ffffff; 
line-height: 13px; 
} 
div.floating-menu h1 { 
color: #000000; 
text-shadow: 0 0 25px #ffffff; 
opacity: 1; 
align: left; 
}

источник

2013-06-08 Thurstylark

вы опечатка здесь 'Выравнивание: левый,' – WooCaSh

Это ** не **, как вы строите семантически меню логики! Используйте 'ul' с элементами списка. –

Вот решение JQuery и работает Demo ->DEMO

$('.floating-menu').mouseover(function() { 
    $('.floating-menu a').css("display","block"); 
}); 


$('.floating-menu').mouseleave(function() { 
    $('.floating-menu a').css("display","none"); 
});

источник

2013-06-08 19:56:16

Это фантастика! Благодаря! Есть ли способ заставить его исчезать, когда он появляется и исчезает? – Thurstylark

Также, как это реализовать? Мне нужно сделать это в основном встроенным внутри довольно закрытого редактора ... – Thurstylark

Вот работающая демонстрация с эффектами fadeIn/Out: http://jsfiddle.net/k4sd4/7/ Также я рекомендовал вам использовать JQuery. В этой ситуации вашего решения вы можете видеть, что в некоторых случаях есть сбои, когда вы наводите курсор меню. С JQuery это будет работать отлично. В вашем HTML документе, в головном теге нужно реализовать этот сценарий: '<сценарий SRC = "http://code.jquery.com/jquery-1.10.1.min.js">' , а затем вы можете открыть '' тег в ваше тело, и вы можете вставить код jquery из Demo. Вот JQuery api, я надеюсь, что это вам поможет: http://api.jquery.com/ –

(CSS ONLY FIX) Добавлен opacity:0; в div.floating-menu a:link, div.floating-menu a:visited и opacity:1; к div.floating-menu:hover a:link, div.floating-menu a:visited

div.floating-menu { 
    position: fixed; 
    bottom: 10px; 
    left: 10px; 
    width: 120px; 
    z-index: 100; 
    padding-left: 10px; 
    line-height: 0px; 
    transition: all 1s; 
    opacity: 1; 
} 
div.floating-menu:hover { 
    line-height: 9px; 
    opacity: 1; 
} 
div.floating-menu a, div.floating-menu h1 { 
    display: block; 
    margin: 0 0.5em; 
} 
/*ADDED A '0 OPACITY'*/ 
div.floating-menu a:link, div.floating-menu a:visited { 
    color: #888888; 
    letter-spacing: -1px; 
    transition: all 1s; 
    text-shadow: 0 0 2px #cccccc; 
    opacity: 0; 
} 
/*ADDED A '1 OPACITY' ON MENU HOVER*/ 
div.floating-menu:hover a:link, div.floating-menu a:visited { 
    opacity:1; 
} 
div.floating-menu a:hover { 
    letter-spacing: 1px; 
    color: #ffffff; 
    color: #cccccc; 
    text-shadow: 0 0 2px #ffffff; 
    line-height: 13px; 
} 
div.floating-menu h1 { 
    color: #000000; 
    text-shadow: 0 0 25px #ffffff; 
    opacity: 1; 
    align: left; 
}

источник

2013-10-05 14:13:26

Спасибо Walery For The Clean Up, было слишком рано утром за все, что хаха –

Как перейти на: ссылки на основе родительского div: hover

ответ

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