사용자가 포함 된 HREF를 사용자가 가리키면 DIV의 배경색을 변경하는 방법?

메뉴 항목이 여러 개있는 메뉴 모음이 있습니다.사용자가 포함 된 HREF를 사용자가 가리키면 DIV의 배경색을 변경하는 방법?

menubar with menu items

모음 (또한 div가있다) 메뉴 항목을 포함하는 DIV이고 각 메뉴 아이템의 내부에 난 HREF있다. 여기

는 HTML입니다 :

<style> 
.menubar-style { 
    width: 100%; 
    background-color: white; 
    height: 20px; 
    text-align:center; 
} 
.menuitem-style { 
    float: left; 
    width: 10%; 
    border-right: thin; 
    border-right-style:solid; 
} 
</style> 
... 
... 
<div class="menubar-style"> 
    <div class="menuitem-style"><a href="#">Link 1</a></div> 
    <div class="menuitem-style"><a href="#">Link 2</a></div> 
    <div class="menuitem-style"><a href="#">Link 3</a></div> 
</div>

는 내가하고 싶은 것은 메뉴 항목의 배경색 변화합니다 (DIV을뿐 아니라 HREF) 커서의 맨 위에있는 경우 링크.

마우스 오버 이벤트를 링크에서 캡처하여 전체 메뉴 항목의 배경색을 페인트하는 방법은 무엇입니까?

더 나은 방법은 마우스가 전체 메뉴 항목 위에 있는지 확인하는 것입니다 (div 링크가 아님)? 메뉴 항목이 링크가 아닌 상자 위의 마우스로 색상을 변경하기 때문에 더 좋은 옵션입니다.

고맙습니다. 마우스가 특정 객체 위로 마우스를 이동하는 동안

월

출처

2012-11-10 Jan Tacci

당신은 단순히

.menuitem-style:hover { 
    background-color: red; // only changes to red if the mouse is hovering. 
}

출처

2012-11-10 07:28:03 Ahmad

쿨! 그러나 나는 배경색이 아닌 경계 스타일을 바꾸고 있다는 것을 알아 차렸습니까? 아니면 실제로 일어나는 일입니까? 나는 그것을 밖으로 시도하고 볼 수있을 것 같아요. :) –

@JanTacci 제 편집을 참조하십시오. – Ahmad

위의 내 의견을 무시하고 무시하십시오. 그냥 _background-color_를 호버에 추가해야합니다. –

당신이해야 할 몇 가지 자바 스크립트 또는 jQuery를 사용했을 경우에만 적용 할 수있는 미리 정의 된 스타일에 :hover 선택기를 추가 할 수 있습니다 이. 그래도 div 위에 마우스를 올려 놓으면 div의 색상을 변경하는 것이 더 쉬울 것입니다.

은 <head>이 추가 :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

당신은의이 클래스 menu-link을 부르 자, 당신의 <a> 태그에 클래스를 추가해야합니다. 따라서 <a href="#">Link 1</a> 대신 <a href="#" class="menu-link">Link 1</a>이 표시됩니다.

이제, 당신은 당신의 <head>에 다음 jQuery 코드를 추가 할 수 있습니다

<script> 
    $('a.menu-link').hover(function() 
    { 
     $(this).parent().css('background-color', 'red'); 
    }, function() 
    { 
     $(this).parent().css('background-color', 'white'); 
    } 
</script>

이 jQuery 코드는이 경우에 <div> 태그입니다 <a> 태그의 부모의 배경 색상을 변경합니다.

출처

2012-11-10 07:35:07

그냥 hover 이벤트를 처리하기위한 jQuery ?? – techfoobar

내부의 태그 위로 마우스를 가져 가면 div를 변경하려고합니다. 당연히 div를 움직일 때 div를 변경하는 것이 더 쉽거나 더 낫지 만, 그것은 문제가 아닙니다. –

귀하의 해결책은 정확하고 의문의 여지가 있습니다. 내가 말한 의미는 jQuery를 포함하는 것이 그러한 작은 요구 사항에 대한 과잉 공격이라는 것입니다. – techfoobar

사용자가 포함 된 HREF를 사용자가 가리키면 DIV의 배경색을 변경하는 방법?

답변

관련 문제