JQuery :: Control Hover Of Another Link With Current Link Hover
Jun 4, 2011
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 need to get the css hover color of an element. Since hover is a pseudo class of a class or id, I do not see a way of returning the color. I tried: $('.contentArea a:hover').css('color'); but it does not return the hover color. I understand that jQuery probably traverses the inline styles and there is no way to set the hover pseudo class inline, hence the reason for the .hover function. Is it possible to find and return the hover color with jQuery. If so how?
I want to animate a div when i hover on my "Home" link, the animate would expand the div with the content in it...how can i achieve this using jquery ?
I'm trying to do a basic image swap when a link is mouseovered. The idea is that you hover over a group of links that is associated with that image, and the image lights up. I have different sets of links and images all over the page.markup looks something like this:
So I have done this menu and I have 2 problems. 1. When I hover on a link, it does 2 animations, but when I "unhover", it doesn't reset the default values also with animations. I know the problem might be the display none in the css, but I really have no idea how to get around that. 2. As I said above, when I hover on a link, it does 2 animations, but when I move the cursor to another link, it doesn't "re"-do the animations anymore.
I'm trying to achieve an effect where background image will change once you hover over a different link, but not sure how to go about that...Here's what I got:
HTML <ul id = "list"> <li id="home"><a href="#">HOME</li></a> <li id="about"><a href="#">ABOUT</li> <li><a href="#">PORTFOLIO</li> <li><a href="#">WORK</li> <li><a href="#">CONTACT</li> <li><a href="#">GET A QUOTE</li> </ul>
CSS body { background-image: url(Images/home.jpg); } ul li { list-style-type:none; font-size:36px; font-family:Impact, Charcoal, sans-serif; } a:hover { background-color:#7EB6FF; -moz-border-radius: 15px; border-radius: 5px; width:40px; } a:link { text-decoration:none; }
And JS should probably go something like this: $("#about").hover(function() { $(this).css("background-image", "url('Images/about.jpg')"); });
Though this only leads to image being show only partially (given that its li element only, I suppose).
I m trying to learn and also implement, what I would like to do is have a content div that maybe holds an image, header and content. When this div is hovered over the div is overlayed with a transparent color and a read more link is also displayed.
I have been trying all afternoon to achieve an effect where the background colour of a hovered on link in a list fades out slowly when the mouse rolls off it. I have found a few tutorials online which are similar to what I want to achieve (but none that are exactly right) like these:[URL].. but despite playing around with them for hours I have had no luck so far... in fact I have yet to have anything have any effect on my links whatsoever!
[Code]...
but this is not ideal for a couple of reasons - firstly as it is css3 it only works in modern webkit browsers and secondly there seems no way to have only a fade out without a fade in - in this example I would like the fade out to be longer but if I increase the transition time from 0.3s then the fade in becomes too long and it feels a bit clunky and unresponsive.
I have a jQuery script that when you hover over a link a text bubble on mouseover will pop up... but I am trying to make the text bubble load when the webpage does instead of having to hover over the link. ( instantly load the text bubble when the page does )
I have a bunch of links which display a given record based on the id in the URL. I would like to be able to hover over the link, and preview the record. The code below kind of works, and a live example is located at [URL]
If the user, however, moves the cursor quickly from link to link, the code seems to get confused over which one it is hovering over. Also, sometimes the hover preview doesn't go away after the cursor is moved from the link.
I've spent quit a bit of time, and haven't figured it out. I think it might have something to do with namespace which is a definite weakness of mine.
HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
I have a simple menu as you can see in which i want the link that gets pressed to change color to grey.(line26).But before that (line25) i use jquery to change all the links back to their original color.But that line of code destroys my hover effect on all my links for a reason.
I'm trying to make script that displays a tooltip when you hover over something, like a link. But it doesn't work and I have no idea why.
This is my script: set the function that will draw the tooltip function tooltip(header, content, w, h) { get the tooltip element var tooltip = document.getElementById('tooltip'); set the browser variable var browser; check what browser the use is using if (document.all) browser = 'ie'; Internet Explorer else if(document.layers) browser = 'ns4'; Netscape 4+ else if(window.navigator.userAgent.toLowerCase().match('gecko')) browser = 'gecko'; Mozilla
set the mouse coordinates var x = event.clientX; var y = event.clientY; change the tooltip's width tooltip.style.width = w; change the tooltip's height tooltip.style.height = h; check if the header is empty if (header.length = 0) header = 'Help'; change the content in the tooltip tooltip.innerHTML = header + '<br>' + content;
change the visibility tooltip.style.visibility = 'visible'; set where to draw the tooltip tooltip.style.position = 'absolute'; tooltip.style.top = y; tooltip.style.left = x; tooltip.style.zIndex = 9999999; } set the function that hides the tooltip function hide_tooltip() { get the element var tooltip = document.getElementById('tooltip'); hide the tooltip tooltip.style.visibility = 'hidden'; }
This how I'm using it on link: <a href='java script: void(0)' onmouseover='tooltip("","This is a tooltip",100,50)' onmouseout='hide_tooltip()'>?</a>
I'm trying to put together a mockup website. to test my knowledge on javascript.So my problem now is putting dynamically a css style using javascript. The style that I need to dynamically put is a hover style, visited style, and link style.
Code: function moveBar() { var bar = document.getElementById("taskbar");
When I hover back and forth over a link in one area of a page, the background-image of a div in another part of the page needs to change back and forth. I have been trying all sorts of things in jquery with no results!
Here's the jquery script... Code: $function() { $("#about-lifebook").hover(over,out); function over (event) { $(.spacer-bg-off).css("background", "url(images/spacer-content-bg.png)"); } function out (event) { $(.spacer-bg-off).css("background", "none"); });
The link's id is "about-lifebook" and the div in question has a class of "spacer-bg-off". This ain't working at all. I just read this off of the jquery website: "The .hover() method binds handlers for both mouseenter and mouseleave events. We can use it to simply apply behavior to an element during the time the mouse is within the element." So perhaps the behavior has to be applied to the element being hovered over? How can I change the css of one element while hovering over another one?
I've been trying to make a html link <a> change an image right below the link. I need to do this for about 5 links (Navigation menu) and all the code I seem to stumble on and try does not work.
I have found the below code that works however it's setup to only replace ONE image. How can I set this up to accommodate about 4 more?
Javascript to make it all work
Code: <script> function changeimage(towhat,url){ if (document.images){
I'm trying to get the hover over image selected based on the current page. I've used an external jquery.url.js library to access file and href information. The if statement is reached correctly, but I can't get the code within it to work. Each image is stored within an anchor and, as with the hover code (included), I'm trying to change the end of its source file name from '_off'to '_on' so it's active.
I've got this script which effectively should change the clicked link's opacity to full and its siblings' opacity to 0.6. The only part that works though is the changing the text color to black. Here's the script:
Currently using jQuery's function loadContent(elementSelector, sourceURL) { $(""+elementSelector+"").load(""+sourceURL+""); } and href="javascript:loadContent('#content', 'page/home.html');"
to load some remote content into the main container. The problems is: i'm unable to find any working solution to highlight the current, active menu item (build as an <ul> and styled with external css), considering the main page isn't reloading - especially when i'm in no way able to understand JS at all.Would any of you have any idea how to mark the current menu item marked as active untill another one is chosen - and then repeat the function?
