JQuery :: Deactivating The "hover" State Of A Hyperlink?
Aug 22, 2010
I have some code which moves an element from one position in the document to another, when a link is clicked. The link itself is moved as well. The CSS makes the link's background change colour when hovering.
This problem is only occurring in IE6/7/8, which is that, when the element (containing the hyperlink which was clicked) is moved, the "hover" state of the link remains "on", that is the background colour remains, even though the link is now somewhere else on the page and no longer under the mouse. The only thing which turns the hover effect off is to move the mouse over and away from it again.
Works fine in Firefox and Chrome, the hover state disappears when the link is moved.
Question is, how do I programmatically switch the link's hover state off, so it goes back to normal in IE? I've tried .blur(), .mouseout(), resetting the className, no luck so far.
[ed] Here's a code demo of the effect in action.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
Issue with Internet Explorer 7 and the Hover State of this div (highlighted in red).[url]
To view an example of what's going on. If I try simply using jquery's mouseover() function without a mouseout () it actually works in the red area, so for some reason a mouseout() is always getting triggered in the left area of the left most box and there's nothing different in that box's css vs. the others.
I have an image that I start out with opacity = 0. Then when I rollover the image area the opacity is set to 1 so I can see the image, and when I roll off of the image the opacity is set back to 0:
This works fine. But the image has an image map that defines a small hot spot. When I roll over the hot spot the image hover state is interrupted and the image goes away. Does anyone know how I can keep the image hover state active when rolling over the image hot spot?
can anyone help with a script which will change an image in a different frame when you hover over a link in a navigation frame. i have mamanged to get the images to change within the same frame, but having trouble changing it within another frame. Code:
Let me explain what is going on. Inside of a div with the id = navContain, are a few images. These images are used as navigation links. These images have the class = imgPos. When you roll over one of these images, the css top property adds 92 pixels.
The image contains two different colored variations of the word "HOME." When the image is in its off state, the word home is white. When you roll over the image, jQuery animates it so that the white text of the word "HOME" slides down, and then a colored version of the word "HOME" slides down and takes its place. This is the same image, just its top property is being changed. jQuery does nothing more than change the top property.
The problem: Sometimes when you roll your mouse over it for the first time, it properly animates to the over state, but then gets stuck in that state even when you mouse off of it. Still in its over state, if you mouse over it again, the over state jumps up and down violently. It never goes back to the state where the text should be white - its original state.
I've tried the stop() function, as you can see in my code. Still, this problem persists and I can't seem to figure it out alone.
I have 6 horizontal navigation image links on top of my site. The regular images are black n white, but on the hover they transform to a colored image. Each image leads to a different page on my site, I'm wondering if I can make the image corresponding to that page light up whenever on that page.
I am trying to style a parent element with a hover state style. I want to change the background colour when hovered over. I cant edit the html as this is generated automatically from a cms.
HTML example <td> <a> <div id=timetablemenu>Timetable</div>
[Code]....
This works fine but i need to add a rollover background colour change. I have tried timetablemenuTag.parentNode.parentNode.addClass="timetable2"; and adding CSS but this doesnt seem to work.
i am implementing a slide dock in jquery i.e. there is a tab and when you click it adock comes out (used fora shopping cart to display the shopping cart) it is working fine the only problem. Once the transition is complete and the shopping cart is closed and returns back to position all the links on the website are deactivated and no matter where i click it wont take me anywhere. This is the code for the jquery of the pageslide:
I use sprites for rollover effects so the hover attribute just changes the background image position. Everything works cool with the rollovers. What I would like to do, is make a text link that when rolled over will change a separate background image to it's hover state. I should add, that the the rollover image has it's own div and is separate from where the text link is located. To get a visual you can check the website [URL] In the body section I would like to make each of the dark red section titles a link that when rolled over will change the hover state of the corresponding "more" button.
I am attempting to make a menu that has a background image that changeswhen you rollover or click a menuitem. I've got the hover effect working fine with CSS, but am trying to implement the click event via jquery with the following:
My process is to reset the entire menu to the inactive state, then switch on the active state for the item that was clicked. Eventually, the item that was clicked will display its corresponding body section as well. I've tried using the CSS pseudo-class "active", but since the entire div is the link, that is unavailable. I've also tried multiple variations of addClass/removeClass, toggleClass, and setAttribute/removeAttributebut nothing hasworked so far.
To say I'm new to JavaScript is a bit of an understatement so bear with me. I have a site set up with a variety of layers of toggles. When you enter the site all of the items are collapsed and you click the headings to expand. Each of the toggle-able items have ids. It works great for users who start at the homepage.
However, when I send people to any of the inner topics, all they see is the initial collapsed state of the site. I want to be able to provide a URL that will set the toggle to open, and show all of the content for that section on entry.
Here is my code and js, can anyone point me in the right direction?
It is simple and it works.But repeating it seems wasteful. I have a navigation menu that consists of an ordered list containing a group of list elements. This is a very common design pattern for navigation. Lets say that I want each list item to contain a div, and I want each div to be clickable.Yes, I know there is a usability issue there: relying on js to create hyperlinks is an ugly sin. But its easy enough to put an anchor element inside the "link div" for user agents without javascript. So here is our html:
So back to my problem:I want to make each div clickable. I could replicate my above js snippet for each one of the divs. But I know just enough about programming for that solution to seem kinda wrong.
I am a JQuery newbie, and was asked to use jquery to do something like this: when clicking hyperlink A, it actually clicks hyperlink B? How to accomplish this using jquery?
I have an imagemap with a list of links to one side. The links highlight areas on the map by overlaying a PNG file, and the links need a "selected" state. The areas on the map need to be clickable too, and when these are clicked, the corresponding link item should get the "selected" state. I've got theselected state workingworking when the user clicks on the links, but can't get it working when they click on the map area.
$(document).ready(function(){ $('a.mapnav').click(function () { var divname= this.name;
[code]....
I checked that "linkname" contains the right text by displaying the label, and it does. All I need to know is how to select the relevant link and add the "selected" class when the imagemap area is clicked.
i came across this plugin [URL] and i thought that it be nice if i could manipulate the content recieved by making the hyperlinks linkable: it be something like select all that start with "http://" and wrap it with an anchor linking to this hyperlink but i have no idea how to do this through jquery
I'm having an issue with adding hyperlinks on images. Please see example below. Without hyperlink on images. [URL]. With hyperlink on images. [URL]. Why the descriptions under the images have disappeared with the hyperlinks on the images?
Umm, this is a tricky one to add a descriptive title for!
Basically I have two links on the page that go to the same page when clicked. What I want to do is when I hover over one of those links for the hover to work for both of them and visa versa.
I have an unordered list of hyperlinks present in a right sidebar on each page where each list item is a specific topic. For example:
Drunk Driving Homicide Rape Molestation Etc.
Right now each of these simply hyperlinks to a page that contains a similar list with a few additions and those list items utilize the .load function to draw an external page for each topic into a div located below the list.
So, the sidebar list currently just links to 'crime.html' and 'crime.html' has a JQuery .load functionality built into the list of crimes that summons the respective topic pages into the target div. What I want to do is figure out a way where IF they click on one of the sidebar list items it takes them to the 'crime.html' and displays the specific topic they clicked on automatically in the target div. Right now anytime they click on the sidebar links (any of them) they merely take the person to the 'crime.html' page where would then have to select the topic again from the list that's present which then summons.. yep.. the external file into the target div. So, trying to eliminate that need for the 2nd click.
Here's the code I have on the 'crime.html' page that summons the external pages into the target div and provides some animation (fade in, out):
$(document).ready(function() { $('#crimecontent').load('prostitution.html'); $('.crimes li a').click(function() { var toLoad = $(this).attr('href');
[Code].....
Notice they all point to crime.html since I don't know how I can pass a specific topic to display. Therefore, they have to click again when they get to crime.html.
