HTML의 href 링크에 대한 호버 효과

방금 웹 디자인을 시작했고이 꽤 오래된 HTML 인 CSS Javascript 코드에 호버 효과를 추가하려고합니다. 내가 원하는 것은 사실 아주 간단합니다. 내가 이미지 위로 마우스를 가져 가면 이미지가 노란색이됩니다. 나는 또한 CSS 을 시도했으나 작동하지 않습니다. 나에게 힌트를 줘.HTML의 href 링크에 대한 호버 효과

<td class="mainMenu"> 
    <a href="n_home.html"> 
     <img onmouseover="yellow(this)" src="navig/home_up.gif" alt="Home" width="34" height="23" border="0" /> 
    </a> 
</td>

td.mainMenu { 
    width : 37px; 
    height: 26px; 
    text-align: left; 
    vertical-align: top;  
}

function yellow(x) { 
    x.style.backgroundColor = "#FFFF00"; 
}

출처

2016-06-23 Marta

이미지가 투명합니까?그렇지 않다면 배경색이 어떻게 보이길 기대합니까? – Quentin

코드 도움을 요청하는 질문에는 문제를 해결하는 데 필요한 가장 짧은 코드 **가 포함되어야합니다. ** [** Stack Snippet **] (https://blog.stackoverflow.com/2014/09/introducing- runnable-javascript-css-and-html-code-snippets /). [** 최소, 완전하고 검증 가능한 예제를 만드는 법 **] (http://stackoverflow.com/help/mcve) –

우선을 작동하면 이미지를 숨길 수 있습니다. 따라서 노란색 함수에 다음 코드를 추가하십시오.

x.style.opacity = "0";

은 <TD>에 ID를 추가합니다.

<td class="mainMenu" id="mainMenu">

그런 다음 당신은 당신의 TD의 크기에 따라 같은 기능

document.getElementById("mainMenu").style.backgroundColor = "yellow";

의 코드를 추가하여 <TD>의 배경색을 변경해야합니다, 배경 색상이 추가됩니다 .

출처

2016-06-23 12:18:51

귀하의 코드가 작동

, 당신이 그것을 볼 해달라고 왜 probleme는 뒷면의 배경 변경,이 때문이다

function yellow(x) { 
 
    x.style.backgroundColor = "#FFFF00"; 
 
}

td.metanavigation { 
 
width : 37px; 
 
height: 26px; 
 
text-align: left; 
 
vertical-align: top; 
 
    }

<td class="mainMenu"> 
 
<a href="n_home.html"><img onmouseover="yellow(this)" src="http://pngimg.com/upload/water_PNG3290.png" alt="Home" width="100" height="100" border="0" /></a> 
 
</td>

출처

2016-06-23 12:02:28

x.style.color = "# FFFF00"은 어떨까요? – Marta

@Marta'color' 스타일 규칙, 효과 텍스트, 그래픽이 아닙니다. –

@Marta 'style.color'는 배경이 아닌 텍스트 색상을 변경합니다. –

그것의 더 나은 페소 선별자를 사용하는 것.

모두 CSS에서 자바 스크립트가 필요하지 않습니다. 여기 은 당신이 할 필요가 바이올린 Here is the working Fiddle

출처

2016-06-23 12:11:10

모하메드의 반응에 피기 백하면서 배경색에 대한 CSS 규칙을 정의하고 간단히 이미지에 추가하거나 제거해야합니다.

추가 기능 및 클래스 함수를 제거는 IE 9 이상에 사용에 대한 정의 (http://YouMightNotNeedjQuery.com)

function addClass(el, className) { 
 
    if (el.classList) el.classList.add(className); 
 
    else el.className += ' ' + className; 
 
} 
 

 
function removeClass(el, className) { 
 
    if (el.classList) el.classList.remove(className); 
 
    else el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); 
 
}

td.metanavigation { 
 
    width: 37px; 
 
    height: 26px; 
 
    text-align: left; 
 
    vertical-align: top; 
 
} 
 

 
.yellow { 
 
    background-color: #FFFF00; 
 
}

<td class="mainMenu"> 
 
    <a href="n_home.html"> 
 
    <img src="http://pngimg.com/upload/water_PNG3290.png" alt="Home" 
 
     onMouseover="addClass(this, 'yellow')" 
 
     onMouseout="removeClass(this, 'yellow')" 
 
     width="100" height="100" 
 
     border="0" /> 
 
    </a> 
 
</td>

출처

2016-06-23 12:20:10

개념적으로는 적용 오히려 img 요소에 배경 색상을 추가하고 잘못이다 하나는 주변/부모 요소에 전달됩니다.

이

div.parent{ 
 
    background: red; 
 
    } 
 

 
div.parent:hover{ 
 
    background:yellow; 
 
    }

<div class="parent"> 
 
     <img src="http://tny.im/4QH" /> 
 
</div>

는 JS없이 달성에만 CSS를 사용 할 수있다. 마우스 오버 이벤트는 부모 div로 전달되어 배경이 변경됩니다.

희망이 도움이됩니다.

출처

2016-06-23 12:30:35

HTML의 href 링크에 대한 호버 효과

답변

관련 문제