CODEWITHSUNDEEP
csshover
Extelliqent
Extelliqent

Reputation: 1858

Different Links CSS Hover change a picture

I would like a CSS hover affect for multiple links that affect the same image. If you look at this example site I have Repair, Sales, Upgrades and Data Recovery links. When you hover over any one of them I would like the image to their left to change. You can hover over the image currently there to see what I mean.

website: http://ctuchicago.squarespace.com/

Upvotes: 0

Views: 1599

Answers (4)

Alon Eitan
Alon Eitan

Reputation: 12025

Wrap the <p>, and <h3> tags inside the <a> tags.

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78520

This seems to work... partially XD

<div class="frontdiv fblankd">
    <a href="/audio-video" id="hav" style="width: auto;">
        <div style="
            height: 80px;
            margin-left: 81px;
            background: white;
            color: black;
        ">
            <h3>AUDIO / VIDEO</h3>
            <p><a href="#music">Music Server</a>, <a href="#theatre">Home Theatre</a>, <a href="#zone">Zone Systems</a>, <a href="#remote">Universal Remote Control</a></p>
        </div>
    </a>
</div>

The basic idea is to have your content in the a tag (like ever body has been saying).

What I've done with the styling is set the anchor to width:auto and wrapped the content in a div. this div I then gave a height of 80px, left margin of 81px, background of white and font color of black.

Upvotes: 0

mrtsherman
mrtsherman

Reputation: 39872

I would create a box that contains the image and all of the links. Then when the box is hovered over the image will change. This doesn't get you exactly what you want - which is only hovering over the link changes the image, but I think it is close enough and far easier.

http://jsfiddle.net/mrtsherman/D5ZRs/

div:hover img { background: url('blah'); }

<div> 
  <img src="" />
  <a href="">Repair</a>
  <a href="">Sales</a>
</div>

Upvotes: 2

Lee Price
Lee Price

Reputation: 5212

Put the image inside the a tag. Then use position: relative to position the image...

for example

a img{
   position: relative;
   left: -50px;
}

Upvotes: 1

Related Questions