2

I have a menu with each item having the following sturcture

<li>
  <a href="#">Menu item</a>
  <span></span>
</li>

When someone hovers over the link the background changes colour and the same happens with the span.

What I want to happen is when someone hovers over the span it also simulates the css hover rules for the sibling a tag.

I can target the anchor element with the following, I tried using the mouseenter function but this hasn't given me the hoped for effect.

$('#menu li span').mouseover(function() {

    $(this).siblings('a').mouseenter();

});

How can I get this working?

Thanks

Improve this question
3
  • 4
    You're probably looking for .trigger(). But I have to ask, why isn't this something you'd be accomplishing with a simple CSS rule? li:hover a { new styles here } JS seems like overkill to me. Commented May 20, 2011 at 14:03
  • To be honest, it may be better to reconsider your markup. If the span is really needed, then it may be a case of putting it inside the A tag, thus solving this issue. Commented May 20, 2011 at 14:05
  • 1
    I need the link to act independenantly to the span if it is hovered. But if the span is hovered then it needs to be shown as part of the link. The span activates a dropdown menu so it is needed. Commented May 20, 2011 at 14:14

4 Answers 4

Reset to default
3

Why not put the hover on the li? 

li:hover a { change...
li:hover span { change...
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

That doesn´t make the span clickable although visually it suggests it does.
Maybe I am mistaken but I took it that he was just wanting the hover state when the a tag is hovered over to activate the spans hover state as well.
no, you're right, that's why I added my second comment. I didn´t delete the first because I think it´s bad design to activate a link hover state when you can´t click it, but that´s what the OP is asking for :)
Both items are clickable so no worries on the design aspect. By highlighting the link when the span is hovered will visually tie them together.
2

Why do you not just put a css hover on the li?

li:hover{

}
Improve this answer

1 Comment

The link tag takes the user to a page. The span operates a dropdown menu. This is why I would like the link to change it's background colour independently of the span.
0

Simple stick the code inside your mouseenter function into a separate function and call that. For example:

$('#menu li span').mouseover(function() {
    doMouseEnter($(this).siblings('a'));
});

function doMouseEnter(element) {
    ...
}
Improve this answer

Comments

0

There are a few solutions, for example:

  1. You can move the span to inside the link and give it a display:block so it appears below it (that´s what I would do, it's the easiest solution);
  2. You can use jquery to get the href of all links and add them as a link / click of the li.

For the second solution I would use something like (in document ready, untested):

$("#menu li a").each(function() {
  href = $(this).attr("href");
  $(this).parent().click(function() {
    window.location = href;
  });
});

Edit: Based on your comments I would suggest:

html

<li>
  <a href="#">Menu item<span></span></a>
</li>

css

a:hover {
  // for link
}
a:hover span {
  // for a and span
}
a span:hover {
  // for span
}

And in jquery you use event.preventDefault() to cancel the click on a span.

Improve this answer

2 Comments

Thanks for the suggestion. I need to keep the elements separate as the link still works as a link
@user330936 Not really, you can cancel the link in javascript if the visitor clicks on the span, see the last line of my edit.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.