How to select two links at once? (i.e. Title & Image)

i'm wondering how to achieve this kind of thumbnail gallery...

http://cargocollective.com/saintea

like when you roll over the thumbnail,

it gives an highlight effect to the title at the same time even though they are two separate elements.

I could make them as one file, but the reason why I want to have them separate is to assign

different effects :) !

can someone please lend me a hand?

thank yo开发者_高级运维u so much for reading this post !!!

have a great day !

---

It's just two <div>s in a link tag. But block elements in inline elements aren't valid, so you could better use <span> elements in a link tag like this:

HTML:

<a href="#">
  <span class="one">text</span>
  <span class="two">something else</span>
</a>

a:link span, a:visited span {
  display: block; /* <-- for example */
  color: blue;
}

CSS:

a:hover span.one {
  color: yellow;
}

a:hover span.two {
  color: orange;
}

---

As the other answers indicate, you could do it with both javascript and CSS. The page uses javascript and the framework jQuery to do it.

I made a demo of how it can be done both ways: here.

Given the following HTML:

<a href="#" id="theLink">
    <img id="theImage" src="http://dummyimage.com/100x50/000/fff&text=Some+image" />
    <span id="theText">Some text</span>
</a>

You can either do it with jQuery (this is roughly how that page does it):

$("#theImage").hover(
    function() {
        $(this).fadeTo("fast", 0.7);
        $("#theText").addClass("hover");
    },
    function() {
        $(this).fadeTo("fast", 1);
        $("#theText").removeClass("hover");
    }
);

where the class hover styles the text.

Here, you are telling jQuery to fire one function when you hover over the image, and another function when you hover out of the image. $("this).fadeTo sets the opacity of the image, while $("#theText").addClass.. well, it adds the class to theText.

(ofcourse, you don't need jQuery to do this, it's just very handy to use such a framework because it abstracts away much of the work)

---

Or with CSS:

#imagelink:hover img {
    /* See http://www.quirksmode.org/css/opacity.html for opacity */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);    
    opacity: 0.7;
}
#imagelink:hover span {
    background-color: #66E8FF;
}

Here we're telling the browser that when we hover over the link with the id imagelink, the contents inside the link of type img should have an opacity of 70%, while elements of the type span should have a different background color.

---

It's perfectly acceptable to wrap just about any elements within a single anchor element. Most browsers already support this, and w/ HTML5 it's actually preferred. So I would just do:

<a href="#">
    <img src="image.jpg" width="" height="" alt="" >
    <p>Description of the image</p>
</a>

a:hover img { }
a:hover p { }

---

I'd do it the following way:

<img src="image.gif" 
  onmouseover="change image style, then change getElementById('comment') style" 
  onmouseout="change all back"/>
<span id="comment">some text</span>