我正在创建一个菜单栏,这时当我将元素颜色变为橙色时,当我将鼠标悬停在菜单栏的第一个和第二个元素上时,下拉div将打开(menuForHeader)。我想滚动时在这个div上,菜单栏的第一个元素的颜色保持橙色。
jquery used
<script>
$(document).ready(function(){
var lastScrollTop = 0
var currentScrollTop = 0
$(window).scroll(function (event) {
lastScrollTop = currentScrollTop
currentScrollTop = $(document).scrollTop()
if (currentScrollTop > lastScrollTop)
{
$('.menuWrap1').css("background-color","black");
}
else
{
if(currentScrollTop==0){
$('.menuWrap1').css("background","linear-gradient(black, transparent)");
$('.menuWrap1').css("background","-o-linear-gradient(black, transparent)");
$('.menuWrap1').css("background","-moz-linear-gradient(black, transparent)");}
}
});
$('#menu2 li:nth-child(2)').mouseover(function(){
$('.menuWrap1').css("height","163px");
});
$('.menuForHeader').mouseover(function(){
$('.menuWrap1').css("height","163px");
});
$('.menuForHeader').mouseout(function(){
$('.menuWrap1').css("height","60px");
});
$('menuForHeader').mouseover(function(){
$('#menu2 li:nth-child(2) a').css("color","orange");
});
$('#menu2 li:nth-child(2)').mouseout(function(){
$('.menuWrap1').css("height","60px");
});
// $('#menu2 li:nth-child(2)').addClass('onHovermenu');
});
</script>
<script type="text/javascript">
var showStaticMenuBar = false;
$(window).scroll(function () {
if (showStaticMenuBar == false) {
//if I scroll more than 200px, I show it
if ($(window).scrollTop() >= 160) {
//showing the static menu
$('.menu').addClass('show');
showStaticMenuBar = true;
}
}
else {
if ($(window).scrollTop() < 200) {
$('.menu').removeClass('show');
showStaticMenuBar = false;
}
}
});
</script>
Html code
<div class="menuWrap1">
<?php echo $this->element('Menus/menuHeader');?>
<div class="menuForHeader">
<?php echo $this->element('Menus/headerServices');?>
</div>
</div>
Css Used
.menuWrap1 {
position:fixed;
right:-21px;
/*margin-left:372px;*/
line-height: 35px;
font-family: 'Oxygen', sans-serif;
letter-spacing: 2px;
height: 60px;
margin-top: -135px;
background: -webkit-linear-gradient(black, transparent);
background: linear-gradient(black, transparent);
background:-o-linear-gradient(black, transparent);
background:-moz-linear-gradient(black, transparent);
transition: height 0.5s ease-in-out;
overflow:hidden;
}
#menu2{
float: right;
margin-right: 200px;
margin-top:-19px;
}
#menu2 li{
display:inline-block;
width:auto;
height:60px;
margin-top:-37px;
padding-right:20px;
}
#menu2 li.menu7{
padding:0;
}
#menu2 li a{
color:white;text-decoration: none;
}
#menu2 li a:active{
color:orange;
}
#menu2 li:nth-child(2) a:hover{
color:orange;
}
答案 0 :(得分:0)
var innerHeader = $('.menuForHeader');
var menuWrap1 = $('.menuWrap1');
menuWrap1.mouseover(function() {
this.css('color', 'orange');
});
innerHeader.mouseover(function() {
this.css('color', 'orange');
});
innerHeader.mouseout(function() {
this.css('color', 'green');
});
menuWrap1.mouseout(function() {
if (innerHeader.style.color === 'green') {
this.css('color', 'green');
}
});
使用与jQuery混合的旧式DOM属性。像一个BAWSS!