Develop Reference

make elements change color with button hover

I seem to be struggling with this.
Im want to make other elements change with button hover.
what im trying to do is , when you hover on the "continue reading" button on the homepage , then for the title and post meta to change color.
The site url is:
http://staging.conversationlab.com/lions_valley/

You can use the hover() method on the more links to trigger a function that applies or removes styling to their siblings like...
$(".more-link").hover(
function() {
$(this).addClass("your-class-with-styling");
$(this).siblings(".post-meta").addClass("your-class-with-styling");
$(this).siblings("h2").addClass("your-class-with-styling");
},
function() {
$(this).removeClass("your-class-with-styling");
$(this).siblings(".post-meta").removeClass("your-class-with-styling");
$(this).siblings("h2").removeClass("your-class-with-styling");
}
);
I would probably add a class to the h2 to target, though, to make sure that it wouldn't conflict with any other h2s that MAY end up in those article sections at some point in the future.

You probably just need to add some css:
<style>
#buttonid:hover {
background-color:#ff0000;
}
</style>
where the #buttonid is declared on your button:
<button id="buttonid"> my button</button>
more info = better answer/s

You can see here how to do it. https://jsfiddle.net/5aybmjk7/
Basically I just added an ID / additional class to your code and then attached the relevant jquery that used mouseover and mouseout to highlight/unhighlight the title by adding or removing a class with CSS attached to it.
$('#here').mouseover(function () {
$(".highlightMe").addClass('colored');
});
$('#here').mouseout(function () {
$(".highlightMe").removeClass('colored');
});

jQuery('.et_pb_posts article').find('.more-link').on('hover', function() {
jQuery(this).find('.post-meta a').addClass('YOUR_CLASS')
});
Try that

Foundation 5 Accordion - Transition Speed?

I am using Foundation 5 Accordions on a Website. They work but I want to change the transition speed. Currently when you click they instantly hide one and show the other. I would prefer they transition vs instantly appearing.
I tried CSS but it didn't work:
.accordion dd > a{
transition: all .5s;
}
Note: I am omitted vendor prefixes.
How do I get these to transition smoothly?
If I can do it with pure CSS this is preferred, otherwise JS will work but I am unsure how?

Lynda, I appreciated your code, in foundation 5, the panel stays visible after the second closing. Seems to be caused by jQuery adding style attributes from sliding. I edited it to fix the issue.
$(".accordion").on("click", "dd", function (event) {
if($(this).hasClass('active')){
$("dd.active").removeClass('active').find(".content").slideUp("fast");
}
else {
$("dd.active").removeClass('active').find(".content").slideUp("fast");
$(this).addClass('active').find(".content").slideToggle("fast");
}
});

As it turns out JS is the way to do this:
$(function() {
$(".accordion").on("click", "dd:not(.active)", function (event) {
$("dd.active").removeClass('active').find(".content").slideUp("fast");
$(this).addClass('active').find(".content").slideToggle("fast");
});
});

You can use this structure:
$(function() {
$(".accordion").on("click", "dd", function (event) {
$("div.active").slideUp(100).removeClass('.active');
$(this).find(".content").slideDown(100).addClass('active');
})
});
Its work correctly.

Here's a solution that is a bit more in-depth with jQuery, as well as utilizing .eq() to specifically target only the first (position 0) a element clicked through all of the li elements. Theoretically, this should work if you add the multi_expand configuration as well, because it only targets the first a element.
$(".accordion li").on("click", "a:eq(0)", function (event) {
var li_parent = $(this).parent();
if (li_parent.hasClass('active')) {
$(".accordion li div.content:visible").slideToggle("normal");
} else {
$(".accordion li div.content:visible").slideToggle("normal");
$(this).parent().find(".content").slideToggle("normal");
}
});
Credit goes to Nemanja Andrejevic on the Foundation forums. Note: this is using the Foundation 5.5 markup. If you're using previous versions, just replace all uses of li with dd.

jQuery basic toggling only working one way

I've created some quick jQuery toggle code:
$("#expander.closed").click(function(){
console.log("opening");
$("#expander").removeClass();
$("#expander").addClass("open");
});
$("#expander.open").click(function(){
console.log("closing");
$("#expander").removeClass();
$("#expander").addClass("closed");
});
The idea is that everytime you click #expander the class toggles between open and closed.
However, for some reason, it only works once, changing from closed to open, and then goes no further.
I have no clue why. Here's a jsFiddle.

I think in the beginning, when you bind the events, .closed class does not exists, so the event does not get bound
May be you should bind the event to some other criteria, or use live. which is deprecated though
Better way would be like this
$("#expander_parent").on('click', '#expander.closed', function(){
// Do your stuff
})

Just bind it using the id and toggle the classes using .toggleClass
$("#expander").click(function(){
$(this).toggleClass('open closed');
});
FIDDLE
if you need to do other functions depending on which class it has you can check like this
$("#expander").click(function(){
var $this = $(this);
$this.toggleClass('open closed');
if($this.hasClass('open')){
// do your open code
}else{
// do your close code
}
});
FIDDLE

You can do this and add your other related operations within the if/else conditions
HTML:
<div id="expander" class="closed">Click Me</div>
CSS:
.closed {
background-color: red;
}
.open {
background-color: blue;
}
Javascript:
$("#expander.closed").click(function (){
if ($('#expander').attr('class') === 'closed') {
$('#expander').attr('class', 'open');
// Add other related functions here
} else {
$('#expander').attr('class', 'closed');
// Add other related functions here
}
});
http://jsfiddle.net/mCDwy/1/

Changing color with jquery removes hover color?

So i have:
#selection_menu .secondary_options button:hover { color: #000066; }
and it works great on my site..
When one of these buttons is clicked, however, i run a javascript function that contains:
$('button').css("color","#FFFFFF");
if(!$sameTile)
$($tileSelector).css("color","#000066");
So that when the button is clicked, the highlight color sticks when the mouse is moved away.
The problem i am having is that after this is run for the first time, the buttons stop changing color when highlighting. How can i get around this? Or is this normal behavior?
I am trying to add a class and i can't get it to work: http://jsfiddle.net/sUKkb/1/
Some more of my code:
index: http://pastebin.com/7gYu9YG8
css: http://pastebin.com/Jz1bvzrr
Or this might be more helpful: http://staging.easyzag.com/style.css
view-source:http://staging.easyzag.com/index.php?section=drink

The issue here is that your jQuery is adding an inline style which will override the rule from your CSS. The other issue is $('button').css('color','#000666') is going to apply inline styles to ALL buttons.
I would suggest adding a rule in your CSS for the defaults and the sticky state like this:
button { color:#fff }
button:hover { color:#fff }
.sticky-state { color:#000066 }
Then in your jQuery you do this instead of what you're doing:
`$(/*add your selector here*/).addClass('.sticky-state');

I believe this is (generally) what you're after:
jsFiddle: http://jsfiddle.net/sUKkb/5/
HTML:
<button class="not-sticky">Hello</button>
JS:
$('button').on('click', function(e){
$(this).removeClass('not-sticky').addClass('sticky-state');
});
Note, this does require a relatively new version of jQuery (1.7+). You could also use:
$('button').live('click', function(e){
$(this).removeClass('not-sticky').addClass('sticky-state');
});
or
$('button').click(function(e){
$(this).removeClass('not-sticky').addClass('sticky-state');
});
for older versions of jQuery.

you can do it without jquery if that's giving you trouble.
add an onmouseover and an onmouseout handler for the hover effect and add an onclick that first cancels the onmousover and onmouseout and then sets the desired color.

Try this;
in your CSS;
.new_class{
color:#000066
}
in your JS
$('button').css("color","#FFFFFF");
if(!$sameTile){
$($tileSelector).removeClass()('.your_previous_class');
$($tileSelector).addClass('.new_class');
}
or you may try
$($tileSelector).css({ 'color':'#000066' });
here is the fiddle http://jsfiddle.net/sUKkb/2/ (without class)
and this one http://jsfiddle.net/sUKkb/3/ (with class)
and this one http://jsfiddle.net/sUKkb/4/ using ID instead of class to make buttons unique
And I think, what you want is a toggle solution like the fiddle below;
http://jsfiddle.net/sUKkb/7/

How can I change the CSS (BG Color) of a specific element with JavaScript Hover events?

Please be patient with me, as I am a fairly new programmer and am extremely unfamiliar with client-side programming. This is my first live project and I wish to do quite a few things that I do not have the knowledge of.
The page in question can be found at http://paysonfirstassembly.com/
I am attempting to accomplish a fairly simple task. I need to change the background color of a specific element (Can be referred to by ID, of course) when it is hovered over. I know that there are other methods of doing this, but frankly, my brain is fried from being sick.
Also, if it helps, I AM using JQuery.

You use CSS, not jQuery for things like this.
In your stylesheet, just add a :hover selector to the CSS style of an element. This new style deceleration gets rendered when the element is hovered:
#original_element {
background-color: blue;
}
#original_element:hover, .hover {
background-color: red;
}
To support those poor people with IE6 and JS (this works for those without JS too), you can use a jQuery function:
$('#original_element').hover(function() {
$(this).addClass('hover');
}, function {
$(this).removeClass('hover');
});

$(ELEMENT).hover(
function(){
$(this).css('background-color','red');
},
function(){
// this is for 'mouse-out' event
}
);
Btw: It's better to assign css class, that has that background color set (+ any additional styles), then you can do this:
$(ELEMENT).hover(
function(){
// add your css class to hovered element
$(this).addClass('highlightClass');
},
function(){
// this is for 'mouse-out' event
// and we are going to remove that highlight
$(this).removeClass('highlightClass');
}
);
Css class could be:
.highlightClass {background-color:yellow;}

You may look for this:
$(selector).hover(
function() { $(this).css('background-color', 'red'); },
function() { $(this).css('background-color', 'green'); },
);

$('#test').hover(function() {
$(this).css('backgroundColor', 'blue')
}, function() {
$(this).css('backgroundColor', 'red')
})
Check working example at http://jsfiddle.net/KW5mJ/