So it changes the background image, but not the background color.
Anyway care to point out the problem in my code?
JavaScript:
$("#menu a").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
CSS:
.hover {
background-color: white;
background-position: top center;
background-image: url("img/dot.png");
background-repeat: no-repeat;
color: red;
}
As mentioned above... if you just add the following css, it will take care of it.
a:hover {
background-color: white;
background-position: top center;
background-image: url("img/dot.png");
background-repeat: no-repeat;
color: red;
}
:hover is a pseudo css class, and you can use it on anything, without needing to add the jquery/js to support it.
A shot in the dark:
you need to make sure that the nodes exist in the DOM before binding events to them. If you're calling your <script> in the <head> wait for document.ready:
jQuery(function($){
$("#menu a").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
});
Alternatively, you could be overriding the background-color property by using a selector with a higher specificity elsewhere. If you've defined styles such as a:link, a:visited, a:hover, a:focus, or a:active you will need a higher specificity selector to override it:
a.hover {
/* your styles here */
}
You'll need to provide more of your CSS for us to give you better advice.
You may have misspelled an ID or not nested your a elements under another element with [id="menu"].
As per ShankarSangoli's comment, you likely have another rule in your css that is overriding the background color, which in turn is likely a problem with specificity.
You can test this by changing your hover function slightly:
$("#menu a").hover(
function () {
//add 'background-color' as an inline css style which will have higher specificity than anything in the css.
$(this).addClass("hover").css('background-color', 'white');
}, function () {
$(this).removeClass("hover").css('background-color', '');
}
);
Your problem is that something overwrites your background color. Use firebug or another DOM inspector to find your problem. A hotfix is to make your background-color important but you should only use this for testing:
background-color: black !important;
If this works, you still need to find out what is overwriting your background.
Then you can do this with pure CSS
#menu a:hover {
background-color: black;
background-position: top center;
background-image: url("img/dot_hover.png");
background-repeat: no-repeat;
color: red;
}
Related
I'd like to change the css "background-image:" when someone clicks a button.
I'm not sure if I'm able to change it through css or if I would need to incorporate java script. Also, if I need java script what type of code would I need?
My current work around is with css and it looks like:
.hello-button {
background-image: url("hello.png");
background-repeat: no-repeat;
background-attachment: inherit;
background-position: center;
-webkit-transition: 2s ease-out;
-moz-transition: 2s ease-out;
-o-transition: 2s ease-out;
transition: 2s ease-out;
}
.hello-button:hover {
background-image: url("bye.png");
background-repeat: no-repeat;
background-attachment: inherit;
background-position: center;
transition-delay: .7s;
-webkit-transition-delay: .7s;
-moz-transition-delay: .7s;
-o-transition-delay: .7s;
}
I'd approach it like this. http://jsfiddle.net/darcher/6Ex7h/
jquery
$('.img').on({
click: function(){
$(this).addClass('new-bg').removeClass('bg') // changes background on click
},
mousedown: function() {
// :active state
},
mouseup: function() {
// on click release
},
mouseenter: function() {
// on hover
},
mouseleave: function() {
// hover exit
}
/*
, hover: function(){
// or hover instead of enter/leave
}
*/
})
With these varying states, you can do anything you need. There are also a variety of other states you can use http://api.jquery.com/category/events/mouse-events/
html
<div href="#" class="img bg"></div>
css
.img{
background-repeat:no-repeat;
background-size:cover;
background-position:center;
display:block;
height:200px;
}
.bg{
background-image:url(http://placehold.it/300x200/white/black);
}
.new-bg{
background-image:url(http://placehold.it/300x200/black/white);
}
there are css only alternatives, but they're not really great on support: http://tympanus.net/codrops/2012/12/17/css-click-events/
You could use javascript for change the background. The following website javascripter is an example of changing background color and manipulating CSS by Javascript. I hope this can help you.
1. CSS pseudo-class selector:active
If you didn't care about persistence you could always use the the pseudo-class ":active". The image will only be affected as long as your mouse is down. As soon as you mouse-up it'll revert. At this moment, that's about as close as you can get in CSS.
.hello-button:active {
background-image: url("image.jpg");
}
JSFiddle Example: http://jsfiddle.net/pkrWV/
2. Change Style Attribute with JavaScript
JavaScript is just about the only way you're going to be able to click on an object, mouse-up and the background is still changed. JavaScript gives you a couple ways to do it too.
You can use JavaScript to change the object's style attribute to update the 'background-image'.
obj.style.backgroundImage = 'url("image.jpg")';
JSFiddle: http://jsfiddle.net/pkrWV/1/
3. Change Class Attribute with JavaScript
Or similarly, you could create two classes in your CSS, and use JavaScript to update the object's class attribute.
/* JavaScript */
obj.className = 'imageOneClassName';
/* CSS */
.imageOneClassName {
background-image: url("image.jpg");
}
JSFiddle: http://jsfiddle.net/pkrWV/2/
My personal favorite method is the third option where you still use CSS to style your obj in different states, and then you use JavaScript to change the class name to update those states. It's less JavaScript, more CSS, and you're keeping everything in their appropriate places.
$(function() {
$('.home').click(function() {
$(this).css('background-image', 'url(images/hello.png)');
});
}):
you have to do like this, there was a relative question see this i hope i helped you...
jquery onclick change css background image
There's no way to do this in pure HTML/CSS, but in javascript you can do it like so:
var button = document.getElementsByClassName("hello-button")[0];
button.addEventListener("click", function(){
button.style.backgroundImage = "url(bye.png)";
});
You can either include this in a <script></script> tag or add it to a .js file and include that by adding <script src="scriptName.js"></script>
Here's a CSS-only solution: http://jsfiddle.net/VVj6w/
HTML
<input type = "checkbox" id = "backgroundToggle" />
<label for = "backgroundToggle">Switch Background</label>
<div id = "wrapper"></div>
CSS
* {
padding: 0;
margin: 0;
border: 0;
}
html, body {
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
input[type = "checkbox"] {
display: none;
}
label {
position: absolute;
top: 10px;
left: 10px;
background-color: #eee;
border: 2px solid #ccc;
padding: 5px;
border-radius: 10px;
font-family: Arial, Sans-Serif;
cursor: pointer;
}
#wrapper {
background-color: hsla(0, 100%, 50%, 1);
height: 100%;
width: 100%;
}
input[type = "checkbox"]:checked ~ #wrapper {
background-color: hsla(0, 100%, 50%, 0.1);
}
If you only want it to change while you are clicking, you should be able to use
.hello-button:active {
background-image: url("bye.png");
...
}
If you want it to remain that way after the click (after the mouse button has been released), you will have to use javascript. Something like the following
document.getElementsByClassName("hello-button")[0].addEventListener("click", function(el) {
el.classList.add("clicked");
});
Then in the CSS, update your selector to
.hello-button.clicked
in css I define the behavior of the text links like this:
a:link {
color: gray;
}
a:active {
color: #9999ff;
}
a:hover {
color: #9999ff;
}
a:visited {
color: gray;
}
Works fine. After I visited a link it should/ and does still have the same color. BUT, and that's what I don't get... after I visited a link it does not hover anymore. How can I make the text link behave the same way always: e.g. link:gray hover:blue???
Thx
#Frits van Campen is correct, the visited pseudo-class selector is overriding the hover selector, this fiddle has it fixed.
a:link {
color: gray;
}
a:active {
color: #9999ff;
}
a:visited {
color: gray;
}
a:hover {
color: #9999ff;
}
This is a CSS Specificity issue.
Rules of the same specificity will apply according to the order they were defined.
You should move the more important rules to the bottom of the list, so they take precedence.
Any pseudo-class you don't need, simply do not define it
NB: 1. follow this ordering of a to ensure styling apply to links
2. It's not necessary to specify {visited, focus, active} if you aren't using it.
a,
a:link {
color: fontColor(color2);
text-decoration-color: fontColor(color4) !important;
text-underline-position: under; // to increase the gap between text and underlining in CSS
text-decoration-thickness: 2px;
font-weight: 600;
}
a:hover {
text-decoration-color: fontColor(color2) !important;
}
// mind you am using SCSS (fontColor(color2))
###Try this I think it will work###
hover MUST come after link and visited in the CSS definition in order to be effective active MUST come after hover in the CSS definition in order to be effective.
Copied from w3school
I have an image that loads into a DIV:
.playerSkipForward
{
background-image: url("../images/player/forward.png");
background-repeat: no-repeat;
cursor: pointer;
}
With hover image set
.playerSkipForward:hover
{
background-image: url("../images/player/forward-hover.png");
}
Then at a certain point I add a class to it that changes the image and makes it look "inactive"
$(track).parents().find('.playerSkipForward').addClass('playerSkipForward_inactive')
The new (inactive) class is declared in my CSS like so
.playerSkipForward_inactive
{
background-image: url("../images/player/forward_inactive.png");
background-repeat: no-repeat;
cursor: default;
}
The image changes to the one in the class above correctly. However, it still hovers and changes colors. I do not want to add an unbinding like .on('hover') because bindings can be tricky to manage. Is there a way to override the hover with just the added css class?
Looking at your comments I think this is an issue with CSS specificity.
Try using the following CSS class instead of your current .playerSkipForward_inactive:
.playerSkipForward.playerSkipForward_inactive,
.playerSkipForward.playerSkipForward_inactive:hover
{
background-image: url("../images/player/forward_inactive.png");
cursor: default;
}
Note I've also removed the background-repeat property. You already set the same value for this in your .playerSkipForward rule.
.playerSkipForward_inactive, .playerSkipForward_inactive:hover
{
background-image: url("../images/player/forward_inactive.png");
background-repeat: no-repeat;
cursor: default;
}
If you're using two classes at once, try this more specific selector:
.playerSkipForward.playerSkipForward_inactive,
.playerSkipForward.playerSkipForward_inactive:hover
{
...
}
or the more common and simple:
.playerSkipForward.inactive,
.playerSkipForward.inactive:hover
{
...
}
The following code should do the trick. Just override the hover functionality for inactive state using important keyword.
.playerSkipForward_inactive:hover
{
background-image: url("../images/player/forward_inactive.png") !important;
background-repeat: no-repeat !important;
cursor: default !important;
}
I want that some of my jquery dialogs, not all, have a different title bar color.
How can I acheive this?
I used the property dialogClass:"myClass" in desired dialogs but this doesen't change the title bar, just the dialog body.
Thank you!!
Specifying a dialogClass adds this class to the outermost div wrapping the entire dialog including the title bar, so you just have to make sure that you CSS rule is targeting the correct element. For instance:
.myDialogClass .ui-widget-header {
background: purple;
}
div.ui-widget-header {
border: 1px solid #3b678e;
background: #3b678e url("images/ui-bg_gloss-wave_35_3b678e_500x100.png") 50% 50% repeat-x;
color: #ffffff;
font-weight: bold;
}
You could do:
div#myDialog .ui-dialog-titlebar {
background-color: red;
}
The .ui-dialog-titlebar is what you are looking to apply your style to.
I've got a menu like this one :
<ul id="menu">
<li>test</li>
<li>test2</li>
</ul>
and css :
#menu li a:link {
background: transparent;
}
#menu li a:hover {
background-color: red;
}
At some point in my code I need to make the background of the links transparent again, so I make a :
$("#menu > li > a:link").css("background","transparent");
Which works but after that, my problem is that it seems to wipe the background-color attribute of the css hover. Indeed when I hover the links again nothing happens. If that helps when I add color:blue in the #menu li a:hover css, the text is blue when I hover but still no background-color.
I figured out a way to do the hover with jQuery but I would prefer to do it with css since in my opinion that's how it should be.
Is it a bug ? Is there any way to make the background transparent without wiping the hover css ?
Thanks in advance,
Nolhian
I had this same problem, and my solution was to make two separate classes rather than change the background color in jquery.
a.default:hover { background-color: red; }
a.hovered:hover { background-color: transparent; }
$("#menu > li > a:link").removeClass("default");
$("#menu > li > a:link").addClass("hovered");
Target the background color directly, instead of simply "background":
#menu li a:link {
background-color: transparent;
}
$("#menu > li > a:link").css("background-color","transparent");
No, the problem is with your CSS and the fact it's being overwritten. Change:
a:hover {background-color: yellow; }
to this:
a:hover {background-color: yellow!important; }
Then it will work properly.
You can do a "onmouseover" javascript hover.
It's just a side effect of how CSS works. The :hover pseudo-class must be declared AFTER the :link pseudo-class. Changing :link will reset :hover, so you need to reset your :hover as well. One way to avoid this would be to move your CSS that alters the color from its initial setting into a class:
a:link {background-color: transparent; }
a:hover {background-color: yellow; }
a.myClass:link {background-color: cyan; }
And then
$("#menu > li > a:link").addClass("myClass");
And later
$("#menu > li > a:link").removeClass("myClass");