Hi Jayzon,
$(document).ready(function(){
$("a.email").hover(
function () {
$
(this).parent().siblings("div.memberpic").children("img").css({"margin-
left":"-210px"});
},
function () {
$
(this).parent().siblings("div.memberpic").children("img").css({"margin-
left":"0px"});
}
);
});
The prev() looks only for sibling elements.
One more tip: instead of .css() I recommend to create a CSS class
(something like .hovered) and then you could do this:
...
$("a.email").hover(
function () {
$
(this).parent().siblings("div.memberpic").children("img").addClass("hovered");
},
function () {
$
(this).parent().siblings("div.memberpic").children("img").removeClass("hovered");
}
);
...
Then if you decide to improve the hover state somehow, you can do that
in your CSS file instead of changing your Javascript file.
--
Bohdan Ganicky
On Jan 22, 11:55 pm, Jayzon <[EMAIL PROTECTED]> wrote:
> Hi!
>
> To get this right, I'll post the html-part first:
>
> <div class="memberarea">
> <div class="memberpic">
> <a href="#">
> <img src="the_image.jpg" alt="Mr. X" title="Mr. X" />
> </a>
> </div>
> <div class="memberinfo">
> <h4>Mister X</h4>
> <p>Info 1</p>
> <p>Info 2</p>
> <p>Info 3</p>
> <a href="##" class="email">[EMAIL PROTECTED]</a>
> </div>
> </div>
>
> Now, I'd like to add a css property (or even better: a:hover-state) to
> the link in the "memberpic"-div everytime the link with the class
> "email" is hovered. The image-link changes from b/w to color when it's
> hovered (more info
> at:http://www.bertdesign.de/designen/css-tutorial-i-hover-effect-on-link...).
> Because both links will include the same "mailto:"; address, I want the
> image-shifting to occur on the "normal" link, too.
>
> I tried to do this with the following code:
>
> $(document).ready(function(){
> $("a.email").hover(
> function () {
> $(this).prev("a").css({"margin-left":"-210px"});
> },
> function () {
>
> $(this).prev("a").css({"margin-left":"-210px"}).remove();
> }
> );
>
> });
>
> That's what I expected to get done: When hovering an "a.email"-link,
> the previous link should get the "margin-left: -210px;"-property and
> should loose it again when the mouse is out of the link-area.
>
> Since I'm totally new to jQuery, I tried to copy/paste the code from
> the documentation and fit it to my needs. This didn't work out & I
> have no idea how to achieve the desired effect.
>
> Any help is appreciated. Sorry for this stupid question (and the maybe
> bad english ;) ).
>
> Thanks!
>
> Greetings,
>
> Jayzon
