How to reset (undo) a:hover property - css

In the HTML below, there are three <style> blocks. The second block is the unwanted one, which makes the image disappears when mouse hover. The first two blocks are un-editable. We have to use the third block to cancel out the effect of the second block. Given an example of the third block below, but that does NOT work.
<!DOCTYPE html>
<html>
<head>
<style>
a {
display: inline-block; width: 280px; height: 32px;
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
}
</style>
<style>
/* some bad guy did this */
a:hover {
background-image: none;
}
</style>
<style>
/* to revert what the bad guy did */
/* but this is NOT work! */
a:hover {
background-image: inherit !important;
}
</style>
</head>
<body>
</body>
</html>
Thanks very much for you inputs.
Note that, (sorry, i didn't make it clear enough), this is just an example. In the real case, there are many <a> with the first block setting them to different images. Just Only One second block ruins them all. As there are many (unlimited in fact, as it is a dynamic page) <a>, it is impossible to handle them one by one. I wish to have only one third block, that can revert the effect of the evil second block. Thanks a lot.

write:
<style>
a:hover {
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
}
</style>

It's a typo: you have one extra } in your style, remove this.
a {
display: inline-block; width: 280px; height: 32px;
background-image: url('http://www.w3schools.com/images/w3logotest2.png'); }
}
it should like this:
a {
display: inline-block; width: 280px; height: 32px;
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
}
And also provide background-image url because inherit just inherits from it's parent not previously defined.

I think I understand you now.
Each anchor has a different background image.
Some guy went and set that url to none on hover. (and you obviously have no access to the markup)
Now you want to return that url on hover.
Well, sorry, but as far as I know you can't do this in CSS.
CSS has no 'undo' in this context.
See this SO answer.
If this is the only block of anchor elements you could use nth-child to target the second one.
a:nth-child(2):hover {
background-image: url('http://www.w3schools.com/images/w3logotest2.png'); }
}
FIDDLE
The anchor element in question must have a value for href so you could target that via the attribute selector
a[href="http://your-website"]:hover {
background-image: url('http://www.w3schools.com/images/w3logotest2.png'); }
}
FIDDLE
If you hover over the second element in the above fiddle, you'll see that hovering over it doesn't make it disappear.

Try this:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
a {
display: inline-block; width: 280px; height: 32px;
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
}
</style>
<style>
/* some bad guy did this */
a:hover {
background-image: none;
}
</style>
<style>
/* to revert what the bad guy did */
/* but this is NOT work! */
.toggle-a:hover {
background-image: inherit !important;
}
.toggle-a a{
float: left !important;
}
.bg-hover{
background-image: inherit !important;
}
</style>
</head>
<body>
<div class="toggle-a">
<a class="overwrite" href="http://www.w3schools.com/"></a>
<div>
<script>
$(function(){
$('.overwrite').mouseover(function(){
$(this).addClass('bg-hover');
}).mouseout(function(){
$(this).removeClass('bg-hover');
});
});
</script>
</body>

Related

How would I target an id within a class in LESS?

Relatively new to LESS and trying out how nesting works. I have read the things on the less page.
HTML
<!DOCTYPE html>
<html>
<head class="Setup">
<link rel="stylesheet/less" type="text/css" href="../LESS/core.less"/>
</head>
<div class="Test">
<span id="Test1" class="Test2"></span>
</div>
</html>
LESS
.Test2 {
display: block;
#Test1 {
.background1;
width: 40px;
height: 1000px !important;
}
}
but if I were to write it without the nesting it works
.Test2 {
display: block;
}
#Test1 {
.background1;
width: 40px;
height: 1000px !important;
}
.background is just {background: red;}. Is the concept just messed up in my head?
Nesting Issues and Mismatched Markup
Nesting generally indicates that a particular element will appear beneath another element, so your current code has the right idea.
Currently your nesting example would attempt to target an element with an id of "Test1" that was nested below an element with the class "Test2", which isn't the same as your markup.
If you wanted to use the same markup to target your element, consider changing your outermost .Test2 selector to .Test instead :
/* This will target an element with id "Test`" below an element with class "Test" */
.Test {
display: block;
#Test1 {
width: 40px;
height: 1000px !important;
}
}
You can see how this is translated to CSS below :
Background Check Your Syntax
Additionally, there appears to be an issue with your .background selector that you were using. Did you mean to target an additional style below your "Test2" element like the following example?
.Test {
display: block;
#Test1 {
.background{
width: 40px;
height: 1000px !important;
}
}
}
which would compile as follows :

Proper Term For This Code

i need to know what the proper term for this code is. someone sent this to me and it was what ii was looking for, but i need the proper term so i can learn it myself. what i'm looking for is the multiple colors on a webpage.
<!doctype html>
<html>
<head>
<title>I am Awesome!</title>
<style type="text/css">
body, #nav, #header, .white-box, .blue-box {
width: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
}
h1{
margin: 0;
padding: 150px 0;
}
#nav
{
height: 60px;
color: #fff;
position: fixed;
background: darkblue;
}
#header {
background: red;
text-align: center;
}
#header, .white-box, .blue-box {
height: 400px;
}
.white-box {
background: #ccc;
}
.blue-box {
background: lightblue;
}
</style>
</head>
<body>
<div id='nav'>Navigation</div>
<div id='header'>
<h1>Some Cool Image!</h1>
</div>
<div class='white-box'>Content!</div>
<div class='blue-box'>More Content!</div>
<div class='white-box'>And Something Else!</div>
<div class='blue-box'>Redundancy!</div>
</body>
</html>
There is no proper term for having multi-colors on a web page. You have a simple css code defining various classes with various colors for different parts of your site. So be easy, Not every thing needs to have a name. If its still confusing, let me know in commnents
The proper term for this is Cascading Style Sheets, also known as CSS. CSS is used to style an HTML document and make it look fancier and do formatting changes that HTML cannot do (i.e change the color of the text or change the font size)
CSS can be edited in programs such as JSfiddle.
To insert CSS into an HTML document, the tag can be used or you can reference the CSS stylesheet using href.
CSS can be applied to 3 different things:
By element type (i.e. p{}
By ID: #main{} OR
By class: .button{}
The CSS code is put inbetween the curly braces.
For example, to change the color of element p to blue I would use
p {
color:blue;
}
It's Cascading Style Sheets, otherwise known as CSS. There are a few different ways to apply the styles:
By element type: body { ... }
By ID: #nav { ... }
By class: .white-box { ... }
You can read more about it online; one example is here: http://w3schools.com/css/css_syntax.asp

CSS: Change Cursor over background-image

I have a background image as part of a body class in CSS:
body.soon1 {
background-color: white;
background-image: url(soon1a.png);
background-position: center;
background-repeat: no-repeat;
}
Then later on I have a javascript function that will change the body class.
The reason I have the image in the background is that when the script activates, the background-color and the background-image will both change at exactly the same time and you can't select the image.
Is it possible that I could change the cursor type only while hovering over the background-image? I understand I can put
cursor: pointer;
in the body styles, but this makes the cursor appear over the entire page.
You can view the live page, currently, where the background changes when you click anywhere on the page.
Edit: I've got something that works for me now. I added a centered div with nothing in it:
div.clickme {
width:300px;
height:400px;
position:absolute;
left:50%;
top:50%;
margin:-150px 0 0 -200px;
cursor: pointer;
}
This works for me because I can set my own arbitrary area, but if anybody has a better solution, let me know.
There's really no compelling reason to make the image a background image. You would be better served by putting the image in two wrappers (required to guarantee absolute centering vertically and horizontally regardless of viewport).
You could extend your array by populating it with objects, so that it can hold possible values for the image and the body style. This way, you can use the same method (cycle through the array) to pick out all of the changes you want, even if you wanted to add other changes later.
Also, while web browsers are rather lenient with standards, it really is trivial to conform to the simple HTML 5 requirements and still keep the functionality.
Lastly, I strongly encourage you to avoid what I call "hipster coding". While it's fun to name functions, variables, et al with obscure names to delight the few that check the source code, it makes for needlessly obtuse language and lower maintainability. In short, it's a bad practice, even if you are the only maintainer.
Observe a new version of your source based on these comments (with indentation cleanup) below.
<html>
<head>
<title>Something Amazing Will Happen</title>
<style type="text/css">
body.light {
background-color: white;
}
body.dark {
background-color: black;
}
div.outside-wrapper {
position: absolute;
top: 50%;
width: 100%;
height: 1px;
overflow: visible;
}
div.inside-wrapper {
position: absolute;
top: 50%;
left: 50%;
width: 381px;
height: 393px;
margin: -197px 0 0 -191px;
cursor: pointer;
}
</style>
<script type="text/javascript">
styleIndex = 0;
var states = [{style: "light", image: "soon1a.png"}, {style: "dark", image: "soon2a.png"}];
function nextStyle() {
if (++styleIndex >= states.length)
styleIndex = 0;
var state = states[styleIndex];
document.body.className = state.style;
document.getElementById("clickme").src = state.image;
}
var tap = true;
document.addEventListener('touchstart',function(e) {
tap = true;
});
document.addEventListener('click',function(e) {
nextStyle()
tap = false;
});
document.addEventListener('touchmove',function(e) {
tap = false;
});
document.addEventListener('touchend',function(e) {
if(tap)
nextStyle();
});
</script>
</head>
<body class="light">
<div class="outside-wrapper">
<div class="inside-wrapper">
<img src="soon1a.png" id="clickme">
</div>
</div>
</body>
</html>
<!-- Don't ask me what it is. -->
Try this
body.soon1 {
background-color: white;
background-image: url(soon1a.png);
background-position: center;
background-repeat: no-repeat;
}
body.soon1:active{
cursor: pointer;
}
What you can do is, put the cursor: pointer on body and change the cursor on the childs. Do somthing like this: http://jsfiddle.net/HSdH3/
html:
<body>
<div></div>
</body>
css:
body {
background: red;
width:100%;
height: 100%;
}
body:hover {
cursor: pointer;
}
div {
width: 300px;
height: 300px;
margin: 0 auto;
background: white;
}
div:hover {
cursor: auto;
}
Something like this should work:
<div id="myDiv" style="cursor: pointer">
Another option is to use jQuery, although it may be overkill for this. Regardless, here's what it would look like:
$(document).ready(function(){
$("#myDiv").hover(function() {
$(this).css('cursor', 'pointer');
});
});
Check it out here: http://jsfiddle.net/K5fex/

Change body bgcolor on hovering a div, using CSS only

I want that when I hover an element(a box made with css), the background color of the body changes from one color to another, for example white to red. The problem is that this should be done using css only and no javascript. And if javascript has to be neccesarily be used, then the color should change back to the previous one on mouse out.
---------------EDIT---------------
Actually I was trying this:
body{backgroung: #000;}
#div{some properties}
body #div:hover{background: #fff;}
Pure CSS experiment:
http://jsfiddle.net/Tymek/yrKRX/
HTML
<div id="trigger"></div>
<div id="bg"></div>​
CSS
body {
height: 100%;
}
#bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
widht: 100%;
height: 100%;
z-index: 1;
background: #EEE;
}
#trigger {
position: absolute;
width: 200px;
height: 136px;
top: 50%;
left: 50%;
margin: -68px 0 0 -100px;
background: #333;
z-index: 2;
}
/* KEY */
#trigger:hover ~ #bg {
background: #EE0;
}​
Please use like this
<html>
<body>
<style type="text/css">
.top{
background:red;
}
.top2{
background:white;
}
</style>
<div class="top" onmouseover="this.className='top2'"
onmouseout="this.className='top'">Here</div>
</body>
</html>
Use the :hover selector.
It seems pretty straight forward unless you are doing something very different.
Check following example for reference:
.classname {
background-color:white;
}
.classname:hover {
background-color:red;
}
Working fiddle
You have many typo's in your code such as mispelling background as backgroung and treating div as an ID (#div).
CSS (with explanation to typos)
body{background: #000;} /*backgroung (mis-spelled)*/
div{width:100px; /*#div (treated as ID)*/
height:100px;
border:1px solid black;}
To hover over a parent tag you must compulsorily use javascript or jQuery. you may be getting doubt that why there is no css property to select the parent tag, if so, then you can go through this interesting link . To avoid parent selector concept in most of cases we can evade using positioning in CSS (check Tymek's solution).
jQuery
$(document).ready(function(){
$("div").hover(function(){
$(this).parent(this).css('background-color','red');
});
$("div").mouseleave(function(){
$(this).parent(this).css('background-color','white');
});
});​
Assuming you are new to jQuery, give a link in head tag of HTML, something like below to make the above function work.
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
Check this Working fiddle

Can I give a whole set of styles supreme importance over other style declarations?

Is it possible to give a whole set of styles supreme importance?
Ie, early on you might have the following default css:
<link rel="stylesheet" href="/style.css" type="text/css" media="screen" />
and inside it has
body {
background: #000;
}
h1 {
color: #fff;
}
But then(!) you decide to make things exciting and have some more css inside the tag that is the same but different:
<style type="text/css">
body {
background: #fff;
}
h1 {
color: #000;
}
</style>
For whatever reason, the styles inside style.css that are linked in take importance over the ones I'm putting in statically.
What I'd like to know is, is there a way of umbrella'ing a whole bunch of styles so they take the highest importance? The best I know is
<style type="text/css">
body {
background: #fff !important;
}
h1 {
color: #000 !important;
}
</style>
Which starts to get a bit tedious if there are many styles.
add a single class to body, ie body class="stylecatcher" or whatever
then you can style (and override default styles) easily
<style type="text/css">
body.stylecatcher {
background: #fff;
}
.stylecatcher h1 {
color: #000;
}
</style>
I didn't find it to be a good practise to use the !important selector.
What you need is called specificity. From the w3 here and here and adobe link
Typically in CSS if you add a selector that is the same further down in the document, the one closest to the end (the highest line number) will be taken into effect.
<style type="text/css">
body {
background: #000;
}
h1 {
color: #fff;
}
body {
background: #fff;
}
h1 {
color: #000;
}
</style>
The background would be white and the font color black.

Resources