We Keep Coding

I have a problem with function mouseeneter

Hello please why if I hover on<li> from <ul class='menu controls'> change background but not change color. I know that .controls a have color and it is more than class color for li but if I want addClass for <a> dont work it if i change var li = $(".controls").find('li'); to var li = $(".controls").find('a'); so this dont work why ?
https://codepen.io/Lukinezko/pen/qBOJEad

Add this to your css:
.selected a {
color: white;
}
By the way, you can do this completely with css without js! with just 2-3 lines of css codes..

contenteditable change background color after edit

I am trying to build a spreadsheet-like application and using a table <td> with a tag contenteditable = "true" and I want the background color of the cell to be changed after it was changed.
From my research I figured I would need javascript or jquery to do so, however I know very little of it. Where do I start? So far I have figured how to change color when the cell is being edited. thank you!
<td contenteditable="true" >
<style>
[contenteditable="true"]:focus {
background-color: yellow;
}
</style>
"Stuff"
</td>

So I see you figured out how to change color when the cell is being edited. Now to change the cell after its done being edited you can use the following example.
jQuery has a function called focusout which triggers when the element loses focus from the user. It will then add the class orange which will change the background to orange.
$( document ).ready(function() {
$("td").focusout(function(){
$(this).addClass("orange");
});
});
td[contenteditable="true"]:focus {
background-color: yellow;
}
.orange{
background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td contenteditable="true" >"Stuff"</td>
</table>
Here is a fiddle to play with: https://jsfiddle.net/8zbrxwpz/

Use td[contenteditable="true"] selector, and add the table parent as well.
td[contenteditable="true"]:focus {
background-color: yellow;
}
<table>
<td contenteditable="true" >"Stuff"</td>
</table>
https://jsfiddle.net/kasyzytr/

Replace HTML content and revert on hover

I have a HTML table filled with short sentences in two colors.
I want to cover the text with bars of corresponding colors and, when each block is hovered, the content has to revert to its original HTML state.
I would like to do the following either with JS or CSS:
leave the default HTML table as-is
switch the original content via javascript to a sequence of ASCII 219 / &block / █
make it switch to "original" content when each block (e.g. "last week tonight with J.Oliver) is hovered.
Any help with this method, or a more efficient method, is appreciated. Thanks!
EDIT / a similar code might do it for me, the only thing i miss is the "original content" word:
div:hover span {display:**ORIGINAL CONTENT**}
div:hover:before {content:"█████"}

You can get a similar effect with just CSS - set the same color and background on the cells, then switch to something readable on hover:
.red {
color: red;
background-color: red;
}
.blue {
color: blue;
background-color: blue;
}
.revealer:hover td {
color: black;
background-color: white;
}
<div class="revealer">
<table>
<tr>
<td class="red">One</td>
<td class="blue">Two</td>
</tr>
<tr>
<td class="red">Three</td>
<td class="blue">Four</td>
</tr>
</table>
</div>

If you include jQuery, this will do what you originally requested:
$(function(){
$('td').each(function(idx){
$(this).data().originaltext = $(this).text();
$(this).html(fill_with_blocks($(this).data().originaltext));
})
$('td').hover(function(){
$(this).html($(this).data().originaltext);
},
function(){
$(this).html(fill_with_blocks($(this).data().originaltext));
});
});
function fill_with_blocks(str) {
var blocks = '';
for(var i = 0;i<str.length;i++){
blocks += '█';
}
return blocks;
}

Change div background image, js works in chrome but not ie or firefox?

Basically I want the user to be able to click and change the background, and for there to be multiple backgrounds, for a specific div.
This works perfectly in Google Chrome but not in IE or Firefox.
HTML:
<div id="palette">
<div class="lightblue"></div>
<div class="gold"></div>
<div class="aqua"></div>
</div>
<div id="primary">
</div>
CSS:
#palette {
border: 2px solid white;
width: 25px;
}
#palette div {
height: 25px;
width: 25px;
}
.lightblue {
background: lightblue url(http://www.textureking.com/content/img/stock/big/DSC_4279.JPG);
}
.gold {
background: gold url(http://www.textureking.com/content/img/stock/big/DSC_4287.JPG);
}
.aqua {
background: aqua url(http://www.textureking.com/content/img/stock/big/DSC_4274.JPG);
}
JS:
$(document).ready(function() {
// attach onclick event to your palette colors
$('#palette div').on('click', function() {
// get background of selected palette color
var bg = $(this).css('background');
// change the background of the body
$('#primary').css({ 'background': bg });
});
});
http://jsfiddle.net/KNutQ/1/
It's not showing any errors and other javascripts run, so I'm not really sure what the problem is.
If it's easy to fix please leave an answer, if not I will try it this way: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_backgroundimage

According to the CSS specification getting the computed style of a shorthand should not return anything. You need to list out the individual properties as I've done below.
Perhaps the CSS spec or Chrome will change in the future but at the moment Firefox and IE's behaviour is correct.
$(document).ready(function() {
// attach onclick event to your palette colors
$('#palette div').on('click', function() {
// get background of selected palette color
var backgrounds = $(this).css(['background-color','background-image', 'background-repeat', 'background-attachment', 'background-position']);
// change the background of the body
$('body').css(backgrounds);
});
});

Cell colors changes on mouse-hover without effecting the text color

I want a table which each cell have different colours, which on mouse hover changes to a particular colour specified, without effecting the colour of text. Is it possible without JavaScript?
My simple table with three cell with different colours are
<table>
<tr>
<td bgcolor="red">Red</td>
<td bgcolor="blue">Blue</td>
<td bgcolor="green">Green</td>
</tr>
</table>
Rederring the text colour should have no effect on any of the cell. I want this with simple scripting.

Something like this:
<style type="text/css">
.td_hover { background-color: white; }
.td_hover:hover { background-color: yellow; }
.bg_red { background-color: red; }
.bg_blue { background-color: blue; }
.bg_green { background-color: green; }
</style>
<table>
<tr>
<td class="td_hover bg_red">Red</td>
<td class="td_hover bg_blue">Blue</td>
<td class="td_hover bg_greed">Green</td>
</tr>
</table>

Yes, by using CSS instead of decade-old bgcolor attributes.

add a class (for my example "tablecell"), and remove bgcolor.
CSS-way:
.tablecell:hover {
background-color:#000000; // Put color you want it to be on hover here.
}
.tablecell {
background-color:#FF0000; // Put color you wan tit to be on not-hover here (optional)
}
Javascript-way:
myElement.addEventListener("onmouseover", mouseIn);
myElement.addEventListener("onmouseout", mouseOut);
function mouseIn() {
this.style.backgroundColor = "#000000";
}
function mouseOut() {
this.style.backgroundColor = "#FF0000";
}
jQuery way:
$(".tablecell").on("hover", mouseIn, mouseOut); // functions above