Question

I need help in hovering two HTML tags at once. Please tell how it will be possible.

This is how i am trying to do it.

<style type="text/css">
.imgmap_css_container a:hover
{
  border:2px solid red;
}
</style>
<div align="center" style="position:relative;">
  <img src="http://dailyaeen.com.pk/epaper/wp-content/uploads/2012/09/27+Sep+2012-1.jpg" alt="News" usemap="imgmap201292811139" />

  <div class="imgmap_css_container" id="imgmap2012930125317">
     <a alt="" title="" href="">
        <a style="position: absolute; top: 0px; left: 0px; width: 611px; height: 128px;"  alt="" title="" href="" target="_blank" >
           <em />
        </a>
        <a style="position: absolute; top: 126px; left: 344px; width: 267px; height: 42px;"  alt="" title="" href="" target="_blank" >
           <em />
        </a>
     </a>
   </div>    
</div>

This is the page i am trying to implement on the news paper.

http://dailyaeen.com.pk/epaper/

Looking forward to positive feedback

Regards,
Syed Haider Hassan.

Answer 1

You could use jQuery like in this fiddle

Basically:

• Give each div/image/whatever you want to get highlight at the same time a same class
• Using jQuery bind the hover event
• On hover event get the hovered element’s class
• Select all elements with same class as the hovered one
• Set their css however you like them