Невозможно навести больше div после того, как я нажал на него

Я на самом деле пытаюсь сделать меню с помощью CSS и jQuery. Он использует изображения 2 изображения на кнопку, один для тех, когда он неактивен, а другой для зависания. Эта часть сделана с таблицей стилей. Когда вы нажимаете на li, он принимает тот же стиль, что и мышь. Но за один раз можно щелкнуть только один лидж, поэтому, если вы нажмете на другой (или тот же) li, он отменяет предыдущий для другого (или none). Эта часть выполняется с помощью jquery.Невозможно навести больше div после того, как я нажал на него

Моя проблема в том, что когда я нажимаю на LI, а затем снимаю его с себя, я больше не могу его зависнуть. Я думаю, что есть столкновение между CSS, применяемым jQuery и таблицей стилей.

Там есть HTML часть:

<body> 
<div id="wrap"><!--Header Menu TagBar --> 
    <div id="header"></div> 

    <div id="menu"> 
     <ul> 
      <li id="genre"></li> 

      <li id="author"></li> 

      <li id="home"> 
       <div id="hmIcon"></div> 
      </li> 

      <li id="artist"></li> 

      <li id="year"></li> 
     </ul> 
    </div>

Это CSS часть:

#menu { 
background-color:#fff; 
width:1000px; 
height:60px; 
position:relative; 
} 

#menu ul { 
margin:0; 
padding:0; 
list-style:none; 
overflow: hidden; 
} 

#menu ul li { 
width:200px; 
float:left; 
list-style:none; 
text-align:center; 
height:60px; 
line-height:60px; 
opacity:.9; 
} 

#menu li:hover { 
opacity:1; 
box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.6); 
} 

#genre { 
background-image:url(../images/genreHover.jpg); 
background-repeat:no-repeat; 
background-position:center center; 
background-size:200px 60px; 
} 

#genre:hover { 
background-image:url(../images/genre.jpg); 
} 

#author { 
background-image:url(../images/authorHover.jpg); 
background-repeat:no-repeat; 
background-position:center center; 
background-size:200px 60px; 
} 

#author:hover { 
background-image:url(../images/author.jpg); 
} 

#hmIcon { 
width:100%; 
height:100%; 
background-image:url(../images/HomeIcon.png); 
background-position:center center; 
background-size:50px 50px; 
background-repeat:no-repeat; 
} 

#home { 
background-image:url(../images/homeHover.jpg); 
background-repeat:no-repeat; 
background-position:center center; 
background-size:200px 60px; 
} 

#home:hover { 
background-image:url(../images/home.jpg); 
} 

#artist { 
background-image:url(../images/artistHover.jpg); 
background-repeat:no-repeat; 
background-position:center center; 
background-size:200px 60px; 
} 

#artist:hover { 
background-image:url(../images/artist.jpg); 
} 

#year { 
background-image:url(../images/yearContour.jpg); 
background-repeat:no-repeat; 
background-position:center center; 
background-size:200px 60px; 
} 

#year:hover { 
background-image:url(../images/year.jpg); 
}

И самое лучшее для последней (головной боли), то Jquery часть:

function clouds(cssDiv, otherOpened) { 
var Div = "#Cloud_" + cssDiv; 
var idButton = "#" + cssDiv; 
var h = "200px"; 
if (otherOpened === null) { 
    var clickedImg = "url(./images/" + cssDiv + ".jpg)"; 
    $(Div).fadeIn(1); 
    $(Div).animate({ 
     height: h, 
    }, 600); 
    $(idButton).css({ 
     'box-shadow': ' inset 0px 4px 8px rgba(0,0,0,0.45)', 
     'background-image': clickedImg 
    }); 
    return Div; 
} else { 
    var buttonToUnclick = otherOpened.slice(7); 
    var buttonToClick = cssDiv; 
    var unClickedImg = "url(./images/" + buttonToUnclick + "Hover.jpg)"; 
    $(otherOpened).animate({ 
     height: "0", 
    }, 600); 
    $(otherOpened).fadeOut(1); 
    $("#" + buttonToUnclick).css({ 
     'box-shadow': ' inset 0px 0px 0px rgba(0,0,0,0.45)', 
     'background-image': unClickedImg 
    }); 

    if (Div == otherOpened) { 
     return null; 
    } else { 
     var clickedImg = "url(./images/" + buttonToClick + ".jpg)"; 
     setTimeout(function() { 
      $(Div).fadeIn(1); 
      $(Div).animate({ 
       height: h, 
      }, 600); 
      $("#" + buttonToClick).css({ 
       'box-shadow': ' inset 0px 4px 8px rgba(0,0,0,0.45)', 
       'background-image': clickedImg 
      }); 
      console.log(buttonToClick); 
      console.log(clickedImg); 
     }, 800); 
     return Div; 
    } 
} 
}

И его звонок:

$("#genre").click(function() { 
    whichCloudsOn = clouds("genre", whichCloudsOn); 

}); 
$("#artist").click(function() { 
    whichCloudsOn = clouds("artist", whichCloudsOn); 

}); 
$("#author").click(function() { 
    whichCloudsOn = clouds("author", whichCloudsOn); 

}); 
$("#year").click(function() { 
    whichCloudsOn = clouds("year", whichCloudsOn); 

});

Спасибо за помощь, я открыт для любых советов или решений.

источник

2014-11-02 Yoshino

Если это ваш фактический html, вы должны исправить недостающие '' -tags –

Спасибо, я исправил это, но это не проблема. – Yoshino

Да, поэтому только комментарий, а не ответ. Просто заметили, когда вы копировали свой код в скрипку, а сломанный html может привести к неожиданным результатам. –

jQuery.css() добавляет встроенный стиль, который будет override ваш внешний css. Попробуйте добавить !important на вашем парении, как это:

#year:hover { 
    background-image:url(../images/year.jpg) !important; 
}

Я сделал пример fiddle. (щелкните оба и затем наведите указатель мыши)

источник

2014-11-02 14:15:18

Спасибо, вот что я думал о встроенном стиле, переопределяющем таблицу стилей, но я не знал, как ее решить. – Yoshino

Невозможно навести больше div после того, как я нажал на него

ответ

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