We Keep Coding

I can't hover only one element with Jquery

As I said in title my problem is I can't hover just one element. I gave some effect but each element is affected. I know it's a simple question and I search google and stackoverflow, I found. But any solution is working.
İn the codes are here: https://jsfiddle.net/dty0wth0/
Also I tried that too:
$("section#box").mouseenter(function() {
$('section#box span').css({'transition':'1s','top':'80px'});
}).mouseleave(function() {
$('section#box span').css({'transition':'1s','top':'-80px'});
});
Thanks for helping.

You have an addressing problem.
This hovers the div (entire image), and only works with the span.
$("section#box div").hover(
function() {
$('span', this).css({'transition':'1s','top':'80px'})
},
function() {
$('span', this).css({'transition':'1s','top':'-80px'});
}
);
Although, frankly, this should just use CSS transitions entirely:
section#box div {
position: relative;
}
section#box div span {
top: -80px;
transition: all 1s;
position: absolute;
}
section#box div:hover span {
top: 80px;
}

use jQuerys hover which handles both the mouse in function and hte mouse out function:
$("section #box").hover(
function() {
$('section #box span').css({'transition':'1s','top':'80px'})}
,function() {
$('section #box span').css({'transition':'1s','top':'-80px'});
}
);
also you could proabably use $(this).find('span') inside the hover functions to target the span to the #box that is focussed.

I cannot comment so Ill do it here...
I guess you will need to do is showen here:
https://css-tricks.com/text-blocks-over-image/

You should add the span to your main selector then your mouseenterer and mouseleave will be wrapped in that context.
$("section #box span").mouseenter(function() {
$(this).css({'transition':'1s','top':'80px','text-size':'25px'});
}).mouseleave(function() {
$(this).css({'transition':'1s','top':'-80px','text-size':'12px'});
});

You have a lot of syntax errors (missing comma after function, extra parentheses)
You have a lot of unnecessary code (section selector, extra this context)
You need to include a library that has that method (for instance, jQuery) as you did not attach jQuery to your fiddle
jsFiddle
$("#box").on('mouseenter mouseleave', 'div', function(e) {
var $target = $('span', this);
if (e.type == 'mouseenter') {
$target.css({ transition: '1s', top: '80px' });
} else {
$target.css({ transition: '1s', top: '-80px' });
}
});
When the div is hovered (e.g., mouseenter, mouseleave) call the in/out function. Inside the in/out determine if it was the enter or leave event and apply the CSS to the target span inside the div.
This is actually the better solution because you're binding one event handler to the #box, instead of to each div or span. Once the box is hovered, it checks to see if the target (div) was hovered and if so, calls the function.
Inside the function, the target for the effect is span. this points to div, so simply find the span within the this (div) context and apply the CSS.

How to change CSS pseudo-class element using JavaScript

I want to change this image using javascript:
dance:active { background-image: url("myImage.png") }
You can use
document.getElementById(element).style.backgroundImage = url(image);
to change
#element {background-image: url(image)}
I would like to change the image of when the element is active using javascript. Thanks!

I figured it out!
You can have multiple classes in your CSS :
element.dance1 { stuff }
element.dance1:active { active stuff }
element.dance2 { stuff 2 }
element.dance2:active { active stuff 2 }
and then change the class of the element in javascript:
document.getElementById(element).className = dance1/dance2

You can try using jQuery to achive what you want. dance: active is CSS Pseudo-classes. Learn more about Pseudo-class.
The demo change the div color when mouse down and switch the color back when mouse up. Leave comments if this is not what you want.
$("#dance").on("mousedown", function () {
$("#dance").css("background", "blue");
}).on("mouseup", function(){
$("#dance").css("background", "black");
});
https://jsfiddle.net/x_li/5nkvms8q/
and jQuery can also do the following
$('#damce:checked').val();

How to show button on div mouse hover

i want to show button on div hover.
when i hover mouse on div then button show otherwise hide.
my button in divbutton div.
html
<div class="divbutton">
<button type="button" style="display: none;">Hello</button>
</div>
when I hover mouse on div it should show but how to do that i do not know.
when I remove mouse button again hide.
Thank you.

Use the below selector
button {
display: none; /* Hide button */
}
.divbutton:hover button {
display: block; /* On :hover of div show button */
}
Demo
Also make sure you assign some height or min-height to your div element, else it will be 0 as it doesn't hold any content. Also, don't use display: none; as inline style, as inline styles have highest specificity, and hence, you will be forced to use !important which is bad.
In the above example am using button {/*Styles*/} but that is a general element selector, so make sure you define a class to your button element.

Use following jQuery to perform your task.
Here is a jsfiddle demo
$(document).ready(function () {
$(document).on('mouseenter', '.divbutton', function () {
$(this).find(":button").show();
}).on('mouseleave', '.divbutton', function () {
$(this).find(":button").hide();
});
});

Mr. Alien's answer gives a nice CSS implementation. If you need in jquery, use this -
$( ".divbutton" )
.on("mouseenter", function() {
$("button").show();
})
.on("mouseleave", function() {
$("button").hide();
});
In pure JavaScript -
var buttonDiv = document.getElementsByClassName("divbutton")[0]; //better use some id and then use getElementById
buttonDiv.onmouseover = function() {
document.getElementById("YourButtonId").style.display = 'block';
}
buttonDiv.onmouseout = function() {
document.getElementById("YourButtonId").style.display = 'none';
}

Try this:
$('.divbutton').mouseover(function(event)
{
$(this).find('button').show();
});
$('.divbutton').mouseout(function(event)
{
$(this).find('button').hide();
});

first hide the button with transform property.
button{
transform:translate(100%,100%)
//this will move the button right and buttom
}
then when you hover on div, you bring it back
.divbutton:hover button{
//class name should have been divButton
transform:translate(0,0)}

jQuery changed ID won't run function

I'm trying to make a blue div that turns red when clicking on it and the red div turns back to blue ( so I can add more events on the click after clicking, so .css isn't really an option)
When clicking on the div when it's blue, it turns red. But when I click the red div it doesn't respond, even when I add a simple alert()
Does anyone know what I'm doing wrong?
This is my current code and a JSFiddle
code:
$("#Blue").click(function(){
$("#Blue").attr("id","Red");
});
$("#Red").click(function(){
$("Red").attr("id","Blue");
});
If anyone could tell me what Exactly I'm doing wrong that would be great, thank you in advance

You need to use event delegation -- your click handlers are bound to the matching elements at the time the code is first run, and only then. Since there's no #Red element at that point in time, that second click handler isn't bound to anything.
$(document).on('click',"#Blue", function(){
$("#Blue").attr("id","Red");
});
$(document).on('click',"#Red", function(){
$("#Red").attr("id","Blue");
});
http://jsfiddle.net/mblase75/HDFyn/
http://api.jquery.com/on
That said, the "proper" way to do this would be to add and remove a class, not change the ID:
$('#btn').on('click', function(){
$(this).toggleClass("red blue");
});
http://jsfiddle.net/mblase75/mKMW6/

.click() binds only to existing elements at the time you call it; it will not bind to a later-created element or an element to which you assign the id later.
The fix is to use event delegation. See here and here for more information.
Also, use classes, instead -- much more flexible.

HTML
<div class="Test blue">Test</div>
jQuery
$(".blue, .red").click(function(){
$(this).toggleClass('red blue')
});
CSS
.Test{
width: 50px;
height: 50px;
}
.blue{
background-color: blue;
}
.red{
background-color: red;
}
Fiddle: http://jsfiddle.net/8FmSt/3/

You could use the class and update the ID like below instead of having 2 function to do that action,
$('.Test').on('click', function () {
this.id = (this.id == 'Blue')?'Red':'Blue';
});
DEMO: http://jsfiddle.net/8FmSt/2/
If it is all about changing color, then use a css to change to color like below,
$('.Test').on('click', function () {
$(this).toggleClass('Red Blue');
});
http://jsfiddle.net/8FmSt/5/

Try:
$(".Test").click(function(){
var id = $(this).attr("id");
if(id == "Red"){
$(this).attr("id","Blue");
}
else{
$(this).attr("id","Red");
}
});
Updated fiddle here.

Let's uncomplicate
HTML
<div class="Test">Test</div>
JQUERY
$(".Test").on('click', function () {
$(this).toggleClass("red");
});
CSS
.Test {
width: 50px;
height: 50px;
background: blue;
}
.red {
background: red;
}

how do I modify a :hover style using JavaScript / jQuery?

I have a :hover style definition declared in the CSS stylesheet file:
.myclass:hover {
border-color: red;
background-image: url('http://goo.gl/zdLfy');
}
Now, under given conditions, I want to change the background-image for this hover style.
I don't know how to do this using JavaScript / jQuery. Is this possible? How?

You can add a new style tag cascade over the previous declaration. assuming the css in in the head tag
$('head').append('<style>#element:hover {/
background-image: url("http://new.image/url");/
}/
<style>');

$('#element').hover(function() {
//on hover
if(condition === true) {
$(this).addClass('newBGImage');
}
}, function() {
//when hover ends
if($(this).hasClass('newBGImage')) {
$(this).removeClass('newBGImage');
}
});

Make your CSS be something like this:
.myclass:hover {
border-color: red;
background-image: url('http://goo.gl/zdLfy');
}
.specialCondition:hover {
background-image: url('http://anotherURL');
}
And then, for that special condition do:
$('.myclass').addClass('specialCondition');
And when the special condition is no longer there, remove the class:
$('.myclass').removeClass('specialCondition');
This way you keep your background-urls where they belong, in the CSS

You want to add a class that has the new background and then on hover use something like
$(this).addClass("YourClassName");
and then on leave
$(this).removeClass("YourClassName");