아이콘을 표시하는 메뉴를 만들려고하는데 아이콘 위로 마우스를 가져 가면 텍스트가 나타납니다. 지금까지 가지고 있지만 텍스트의 배경색을 변경하고 싶습니다.
<div id='menu'>
<div id='menuitems'>
<div class="item" onclick="loadPage('/')">
<span class="menuIcon"><img src='/img/layout/icons/home.png'/></span>
</div>
<div class="item" onclick="loadPage('/pages/settings/')">
<span class="menuIcon"><img src='/img/layout/icons/settings.png' /></span>
</div>
<div class="item" onclick="loadPage('/pages/php/')">
<span class='TextMenuItem'>< / ></span>
</div>
</div>
<div id="menuText">
<div class="itemtext" onclick="loadPage('/pages/home/')">Home</div>
<div class="itemtext" onclick="loadPage('/pages/settings/')">Settings</div>
<div class="itemtext" onclick="loadPage('/pages/php/')">Projects</div>
</div>
</div>
따라서 클래스가있는 div 위로 이동 item하면 div 및 div의 색상을 클래스와 함께 변경하고 싶습니다 itemtext. CSS에서 내가 마우스를 가져 가기 전에 클래스가 몇 번 사용되었는지 확인하고 해당 번호를 기반으로 itemtext동일한 번호로 div 의 배경을 채색 하거나 자바 스크립트를 사용해야합니까?
진행 상황이있는 JSFiddle : http://jsfiddle.net/WszKV/
내 문제를 해결하기 위해 자바 스크립트를 사용하게되었습니다.
$('.item').hover(
function() {
var index = $(this).index();
changeMenuBg(index, true);
}, function() {
var index = $(this).index();
changeMenuBg(index, false);
}
)
$('.itemtext').hover(
function() {
var index = $(this).index();
changeMenuBg(index, true);
}, function() {
var index = $(this).index();
changeMenuBg(index, false);
}
)
function changeMenuBg(index, hover){
if(hover){
$($('.item').get(index)).css('background-color','#FF2400');
$($('.itemtext').get(index)).css('background-color','#FF2400');
}
else{
$($('.item').get(index)).css('background-color','');
$($('.itemtext').get(index)).css('background-color','');
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다