We Keep Coding

How to target an h1 inside an <a>?

I want the div to change background when hovered on. But it doesn't change background when the text inside the div is hovered on instead.
This is what I tried, but ALL the background divs change. I also tried a > img instead of just img in my handler functions, but it didn't work at all.
function handlerIn() {
$("img").css({"opacity":1});
}
function handlerOut() {
$("img").css({"opacity":0});
}
$("a").mouseenter(handlerIn).mouseleave(handlerOut);

a > img does not work because img is not a child of a (parent > child) but a descendant (achestor descendant).
So your css rule should look like this:
a:hover img {
opacity: 1;
}
So you don't need jQuery at all, but if you want to use jQuery then you need to use the a element where the event happens as root for our search for the img element otherwise you will find all img elements.
function handlerIn() {
$(this).find('img').css({
"opacity": 1
});
}
function handlerOut() {
$(this).find('img').css({
"opacity": 0
});
}
$("a").mouseenter(handlerIn).mouseleave(handlerOut);

You don't need jquery to done the job.
It can be done by css:
#kpop:hover, #fashion:hover, #martialarts:hover, #nature:hover{
background: url('http://www.dike.lib.ia.us/images/sample-1.jpg/image_preview');
}

Im not sure this correct why you don't use hover() function?
http://codepen.io/soulister/pen/MyZrPy

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();

Replace "inline style" with a "css class" depending by value of its inline style

My site has CMS, so users can directly insert texts and images. CMS ui allows to float left/right images, applying an inline style to IMG tags.
<img src='...' style='float:left'>
I would like to detect when an IMG has a float:left/right style and replace it with a class in order to declare more properties for it like the following example:
.floated-left
{
float:left;
margin-right:20px;
border-left:solid 5px red;
....
}
I thought about something like this:
if ( $("article").find('img').css('float') == 'left')
{
this.addClass('floated-left');
}
But seems that "if clause" never be true. (I know that probably also this.addClass() is wrong, but neither alert() is never fired at the moment)
Can you help me?

Use attr instead of css for selecting inline styled objects:
$('article img').each(function() {
if ( $(this).attr('style') == 'float:left') {
$(this).removeAttr('style').addClass('floated-left');
}
});
if some of object's style is different, try this way:
$('article img').each(function() {
if ( $(this).attr('style').indexOf('float:left') > -1 ) {
var targetedStyle = $(this).attr('style').replace('float:left','');
$(this).attr('style',targetedStyle).addClass('floated-left');
}
});

In order to apply more declarations, you could simply achieve that by pure CSS:
img[style*="float:left"],
img[style*="float: left"] {
margin-right : 20px;
border-left : solid 5px red;
}
You could play with CSS attribute selectors to select the valid image/element.

CSS get parent elements attribute

So i just ran into this problem. Let's say I have the following markup:
<article data-color='#123456'>
<header>...</header>
<a href='#'>Lorem ipsum</a>...
...
</article>
So I have an element with a custom color attribute. I want to have the header have it as a background color, and the link as a color (the color is either randomly generated or user-defined). Is there a way to do this is CSS alone? (I am aware that jQuery would do this without a problem, but I'd like to kepp things as pretty as possible, not using Javascript for styling alone.)

You can use an attribute selector in your CSS:
article[data-color="#123456"] header {
background-color: "#123456";
}
article[data-color="#123456"] a {
color: "#123456";
}
However, this assumes you can enumerate the data-color attributes in your CSS. If it's generated dynamically and can take any value, you can't do it in CSS -- it doesn't have variables or back-references.

Unfortunately CSS cannot do this. the JS is relatively simple though:
$('article').filter(function() {
return $(this).data('color');
}).each(function() {
var $el = $(this), color = $el.data('color');
$el
.find('header').css('background-color', color).end()
.find('a').css('color', color);
});
Example fiddle

I think you can do it like this:
article[data-color="#123456"] header {
background-color: attr(data-color color);
}
article[data-color="#123456"] a {
color: attr(data-color color);
}
UPDATE
The first answer is incorrect, it doesn't work.
Do this rather:
article[data-color="#123456"] header {
background-color: "#123456";
}
article[data-color="#123456"] a {
color: "#123456";
}

CSS: hover when focus on other element

If you look at the following CSS:
fieldset#searchform input[type=submit]:hover
{
background-position: center -13px;
}
fieldset#searchform input[type=text]:focus fieldset#searchform input[type=submit]
{
background-position: center -26px;
}
fieldset#searchform input[type=text]:focus fieldset#searchform input[type=submit]:hover
{
background-position: center -39px;
}
The idea is that a button can be hovered and changed the background, but if the input field has user focus then the button will have a different background when hovered and inactive. However this does not work because CSS doesn't support it! How can I get this to work? jQuery perhaps?
EDIT: I am NOT trying to do multiple definitions!

Yeah, that's definitely not how CSS works so you'll need to use JS. Try something like this:
Generic JS:
$("fieldset#searchform :text")
.focus(function(){ $("fieldset#searchform :submit").addClass("focus"); })
.blur(function(){ $("fieldset#searchform :submit").removeClass("focus"); });
Generic CSS:
fieldset#searchform input[type=submit]:hover {
background-position: 50% -13px;
}
fieldset#searchform input[type=submit].focus {
background-position: 50% -26px;
}
fieldset#searchform input[type=submit].focus:hover {
background-position: 50% -39px;
}
Demo: jsfiddle.net/Marcel/pHsxa

Yes, jQuery, or even plain javascript will do:
With jQuery, use focus() and blur(). In my example, I just change the submit class when these events occurred. I changed the background-color, but you could do anything of course.
http://jsfiddle.net/jtbowden/WPdxE/
The code (simplified):
$(':text').focus(function() {
$(':submit').addClass('focus');
});
$(':text').blur(function() {
$(':submit').removeClass('focus');
});

$("fieldset#searchform input[type=text]').focus(function(){
//do stuff
});
$("fieldset#searchform input[type=text]').blur(function(){
//change stuff back
});

so you are trying to say that when you focus a textbox, you changes needs to go to the submit button. you need a javascript on that, not CSS because you just do in your CSS is for multiple definitions, CSS events only takes effect on the same element, not on other element.
Using jQuery you can,
$('fieldset#searchform input[type=text]').focus(function(){
$('fieldset#searchform input[type=submit]').css('background-position', 'center -26px');
// this is to add hover event on submit button when focused on text box
$('fieldset#searchform input[type=submit]').hover(
function() {
$('fieldset#searchform input[type=submit]').css('background-position', 'center -39px');
},
function() {
$('fieldset#searchform input[type=submit]').css('background-position', 'center -26px');
}
);
});

$('selector').hover(
function(){//put a hover logick code},
function(){//put a blur logick code});
);

rob waminal is right.
Just wanted to add: You can also use jquery .mouseover() mouseout() functions. This comes in handy when you have a whole bunch of elements (now and in future) where you want to have the same effect. In that case you can use the .live() function for event delegation. Eg.
$('.div').live('mouseover mouseout'), function(event){
if (event.type == 'mouseover'){
//do stuff
}
else{
//do stuff }
}
reference: http://api.jquery.com/live/

I just found a way to do it without any javascript, in case anybody's interested. You'd have to make a parent element (I used div) for each input. You can do a "logical and" if you test for hover on the div, and test for focus on the input, like so:
/* no hover, no focus */
fieldset#searchform div.inputparent input[type=submit]
{
...
}
/* hover, no focus */
fieldset#searchform div.inputparent:hover input[type=submit]
{
...
}
/* no hover, focus */
fieldset#searchform div.inputparent input[type=submit]:focus
{
...
}
/* hover, focus */
fieldset#searchform div.inputparent:hover input[type=submit]:focus
{
...
}
I didn't test this in particular, but something similar. I think this should work, maybe you'll need to play with it.