JQuery :: Change IMG SRC On Hover Parent DIV

May 27, 2011

I'm working on a carousel with slides containing text and an image. On slide: hover, the text changes color, but I also need to change the picture. Normally I could use:
onmouseover="document.getElementById('niceImg').src='.....'"
To achieve this goal, but since the slides are dynamically rendered through wordpress, I can only use classes and no ID's. My main question is, how do I change a div's child img src (actually it's parent div > div > img) without assigning an ID to the particular image?

Code:
<div class="spotlightslidecontainer">
<a href="#">
<div class="spotlighticon">
<img src="img/spotlight/thumbactive.png"/>
</div>
<div class="spotlighttext">
<p>text</p>
</div>
</a>
</div>

So here the src of thumbactive.png needs to change to something else on spotlightslidecontainer:hover

View 3 Replies


ADVERTISEMENT

JQuery :: Element Overflows Containing Block When Parent Border/padding Change - Not When Parent's Margin Changes

Sep 24, 2011

Demonstration page: [url]

Adjust the CSS margins of the BODY element with the first slider. The yellow P (paragraph) element resizes to fit its smaller containing block, as I would expect.

Then, adjust the CSS border or padding of the BODY element with the second and third sliders. The P element does not resize, though its origin changes. Instead, it overflows its containing block.

Finally, adjust the margins again. The P element snaps back into its containing block.

As you can see from the source, this is jQuery 1.6.4 and jQueryUI 1.8 pulled from googleapis.com.

Edit: Client is Google Chrome16.0.889.0 dev-m.

View 2 Replies View Related

Styling Parent Hover/mouseover State?

Aug 26, 2010

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.

View 6 Replies View Related

JQuery :: Change The Hover Color ?

Sep 20, 2010

How can i change the hover color with jquery, and when i click the <a> item to change the background-color with every element.

View 1 Replies View Related

JQuery :: Change The Text Within A Div When Hover Over Another Div?

Jun 9, 2011

So I have 4 divs with id's of hoveroverarea1, hoveroverarea2, hoveroverarea3, and resultsbox.The resultsbox's visibility is set to hidden, so it doesn't show when the page loads.

I also have 3 <p> with a class of .comment1, .comment2, and .comment3
I have set the font size to really small and the background color to the same as its parrent so the text looks hidden and doesn't take up much space.I have the font size and color of #resultsbox set to 16px and black so I can see it when it is in #resultsbox.

What I want to do is

when you hover over #hoveroverarea1

1. change the #resultsbox to visable

2. replace the text in the #resultsbox to the text with a class of .comment1

when you hover off #hoveroverarea1

1. reset the text in #resultsbox

2. change the #resultsbox to back to hidden

I also need to do the same for hoveroverarea2 and hoveroverarea3.

View 1 Replies View Related

JQuery :: Change Bg Image On Hover?

Aug 11, 2009

I have a dropdown menu. When the dropdown is hovered, I need a bg image to show, then slowly fade out when the mouse leaves. I wrote

[Code]...

View 1 Replies View Related

JQuery :: Getting Hover() To Work Once Change Color

Nov 9, 2010

I have a single page that I would like to use a different color for the navigation links (because of the background image) and hover effect. So I decided try to use jquery to accomplish this.

Here's the jquery code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4./jquery.min.js</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {

[Code].....

If I comment out line 4 of the jquery code , then the althover goes into effect and links changes to red.

In my second test, I also made the pseudo-class :hover red. and got rid of hover() in the jquery. Again, when I comment out line 4, then :hover works. But if I modify the color via jquery, hover effect via CSS and jquery both fail.

View 2 Replies View Related

JQuery :: On Text Hover Image Change?

Nov 16, 2010

I want this kind off effect [URL] using jquery.

View 2 Replies View Related

JQuery :: Simple Img Hover Change Not Working?

Sep 14, 2010

Frustrated and exhausted. I've created a menu with the following code, but I'm getting this error ("invalid assignment left-hand side

<a class="nav-image" href="/menu-link'">
<img class="image-menu-rollover" src="/image.png">
<span class="nav-txt">menu-title</span>

[code]....

View 1 Replies View Related

JQuery :: Highlight Sentence On Hover - Change Class On Click

Sep 5, 2009

I'm trying to figure this out with jQuery: I have a few paragraphs of text kind of like this:

<p class="original" id="paragraph_1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut metus augue, vitae malesuada massa. Vestibulum nec lectus urna, vehicula porta leo. Fusce dui nunc, scelerisque at molestie ut, ultricies eu purus. Duis tristique placerat rhoncus. Aliquam rhoncus lacus justo. Morbi ultricies egestas orci eget fermentum. Proin sapien sem, suscipit vel semper in, tincidunt id enim. </p>

<p class="text" id="paragraph_2">Maecenas nisl ipsum, faucibus sed pulvinar a, tristique sed magna. Sed dui erat, tempor ut rhoncus sagittis, lacinia quis lorem. Quisque feugiat, ipsum nec varius elementum, est nunc lacinia mi, mollis convallis lorem ipsum at erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

And I have a couple of classes, like so:
.highlight {
background-color: #ccc;
} .strikethrough {
text-decoration: line-through;
}
What I want to do is apply the .highlight class to a sentence (not the entire paragraph) on hover, and apply the .strikethrough class to a sentence on click. It's easy to find a sentence using regex, but I don't know how to add/remove a span to just that particular sentence that is being hovered over. I know I could programatically wrap each sentence in <span>...</span> tags on the backend, but I was hoping there was a better solution.

View 1 Replies View Related

JQuery :: Hover Doesn't Work When Change The Text Color Of A Link?

Sep 11, 2011

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.

<head>
<style>
.link {
color: #fff;

[Code].....

View 3 Replies View Related

JQuery :: Change The Height Of The Parent Of A Visible Li?

Nov 24, 2010

I use a CSS-Menu with this structure:

<div class="tabs">
<ul class="menu">
<li id="item-1">
<a href="#item-1">Tab 1</a>

[Code]....

Via CSS .tabs will be position:relative and the divs within the li are position:absolute to stack. This works fine.

Unfortunately, in some cases the content of li is too height and overflow the parent. I'm looking for a way to find out the displayed li and this height to apply it on the parent elements (CSS) height.

View 3 Replies View Related

JQuery :: Change Parent Div Height After Child?

May 29, 2009

I have the following layout.

.panel
{
position:relative;
width:580px;

[Code]....

The parent (class="panelContent") div contains a child element that is generated/rendered last. This makes the child element #ReportViewer1 overlap the parent (class="rptViewer"). Can I jQuerytize the parent div to adjust it's size after the child renders so it is contained/displayed in the parent?

View 3 Replies View Related

JQuery :: Target Change Css Attribute Of P Tag When Hovering Over Parent Div

Jul 7, 2009

I have the following code

[Code]...

I have the .box class applied to a div basically I what to hover over the div change the background color of the div and at the same time change the text color of any text wrapped in p tags. I am getting close but with this code every instance of the p tag gets swapped out I need to know how to target only p tags in the div that I am mouseing over

View 1 Replies View Related

JQuery :: When A Link Is Clicked That It Will Only Change Elements That Are Within It's Parent Div And Not The Others?

May 27, 2010

I have several divs that each have a certain link. How can I make sure that when a link is clicked that it will only change elements that are within it's parent div and not the others?

View 1 Replies View Related

Jquery :: Change Body Colour Of Parent Window From Within IFrame?

Apr 21, 2008

I'm trying to change the body colour of the parent window when a button is clicked inside an iFrame, using jquery. The code I have is as follows but it just doesn't do anything:

Code in iFrame:
Code:
<html>

[code]....

View 3 Replies View Related

Hover Over Text To Change An Image?

May 20, 2010

personal website I am modifying for a friend. He basically has a list of links such as:

Home
Blog
Pictures
Links

What I want to do is that whenever you roll over, say, "Blog", an image appears to the right of the links (the image will be a small screenshot of what the blog looks like). When you roll over "Pictures", a different image appears in it's place.I already know how to do this when rolling over images, but not rolling over text. I used document.getElementById and just set the src to the image, but how do I do this when I just have text to roll over?[URL]

View 3 Replies View Related

On Hover Hyperlink Change Image

Oct 19, 2006

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:

View 2 Replies View Related

Change Font Color On Hover?

Jun 10, 2011

I'm trying to change the font color upon hovering of my CSS ID's #realmaturesingles and #seniorpeoplemeet. How do I do this using JavaScript? This is what I've tried.

Code:
<script type="text/javascript">
$('#seniorpeoplemeet').FontEffect({
gradient:true,

[Code]....

View 4 Replies View Related

Hover Over Text To Change Image

Mar 16, 2011

i have been trying 2 days to get it to work! basically the 3 image locations are in Variables in PHP

$piclocation1
$piclocation2
$piclocation3

What i want is when you hover over the div class "breaking-news", i want the div ID "latest-news-image" to change to that specific image background. example the top "breaking-news" class is on hover and the image $piclocation1 should show in "latest-news-image". if the middle "breaking-news" class is on hover the image $piclocation2 should show in "latest-news-image". i dont know if i got this in the right area as it would contain javascript, php and poss Css!

[Code]....

View 4 Replies View Related

CSS Hover Reset After Background Color Change

Aug 21, 2009

I have a few table cells that have the following class:
.tc {
some declarations
}
.tc:hover {
background color changed
}

And I have a cell that has an onclick event that calls a function. The function gets all the cells and does this to them:
cell.style.backgroundColor = 'transparent'; // or whatever else

And then the background color of a clicked cell is changed to indicate that it has been selected. The problem is: when I change a backgroundColor of the cells, their :hover states no longer work: if I try to hover the mouse over them - nothing happens.

View 2 Replies View Related

Multiple Class Change On Hover / Rollover

Mar 6, 2010

In the past I've done image rollovers and that's fine. I got scripts for those, and got them to switch fine. But what I want to do is edit the backgroudn color of a TD, which is code defined, and not an image. Anyways, the basic thing I'm doing is a table that hold lots of numbers. I'm creating a "times table" - which looks roughly something like this:

......1 2 3 //top row (multiples)
1.....1 2 3
2.....2 4 6
3.....3 6 9

Now, when you rollover, let's say, the '6' - the TD background color for the '6', left '2' and top '3' would change to a different color (bolded in this example). This would work the same way for every other number as well, which involves overlapping classes. I've search for an answer for hours, to no avail. And here's a more "code specific" example of the table:

Code:
<table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>2</td><td>2</td><td>4</td><td>6</td>
</tr>
<tr>
<td>3</td><td>3</td><td>6</td><td>9</td>
</tr>
</table>

Also, the image rollover script I have goes like this:
Code:
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
} .....

View 5 Replies View Related

Change Textbox Border Color On Hover?

Sep 27, 2011

sing Javascript, on mouseover/hover, I would like to change the boder color of my textbox from
rgb(142, 142, 142) to black: rgb(0, 0, 0,) then when I move the mouse pointer off the textbox, I would like it to change from black back to rgb(142, 142, 142).I can't figure out where to start or how to get this going.

View 5 Replies View Related

Change An Image To Its Hover State Based On Url?

Aug 31, 2011

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.

View 7 Replies View Related

Change Div Background Image With Link Hover

Apr 24, 2010

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?

View 1 Replies View Related

How To Make Text Hover State Change Background Image

May 26, 2010

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.

View 6 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved