CODEWITHSUNDEEP
javascripthtmlcss
Marta
Marta

Reputation: 183

Hover effect for href links in HTML

I just got started with web design and I try to add a hover effect to this pretty old HTML, CSS Javascript code. What I want I actually pretty simple. If I hover over the image the images should get yellow.I also tried the css a:hover but that does not work either. Please give me a hint.

<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";
}

Upvotes: 2

Views: 723

Answers (5)

jarodsmk
jarodsmk

Reputation: 2099

Conceptually it's incorrect to add a background color to the img element, and rather apply one to the surrounding/parent element.

div.parent{
  background: red;
  }

div.parent:hover{
  background:yellow;
  }
 <div class="parent">
      <img src="http://tny.im/4QH" />
 </div>

This can be achieved without any JS and only using CSS. The hover event is propagated to the parent div causing the background to change.

Hope this helps!

Upvotes: 0

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48600

Piggy-backing off of Mohamed's response, you should define a CSS rule for the background color and simply add or remove it from the image.

The add and remove class functions are defined for usage on 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>

Upvotes: 1

Pranoy Dey
Pranoy Dey

Reputation: 192

First thing you need to do is hide the image. So add the following code in the yellow function.

x.style.opacity = "0";

Add id to your <td>.

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

Then you need to change the background color of <td> by adding the code in the same function

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

Depending on the size of your td, the background color will be added.

Upvotes: 2

M.Tanzil
M.Tanzil

Reputation: 1995

Its better to use a pesudo selectors.

All can be done in CSS no need for javascript. Here is working fiddle Here is the working Fiddle

Upvotes: 0

Mohamed Laabid
Mohamed Laabid

Reputation: 29

Your code working , the probleme is that the background changes in the back , this is why you dont see it

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>

Upvotes: 1

Related Questions