I'd like to say right off the bat that THIS IS NOT A CSS PROBLEM. The following is simply to demonstrate with css the kind of problem I'm having.
In an html page filled with javascript and css, there is a <div> tag with the following styling:
div {
background-color:#fff;
}
div:hover {
background-color:#f00;
}
div:active {
background-color:#000;
}
Point being, I can tell when the element is being hovered because the background will be red, and I can tell when it is clicked because the background will be black.
What's happening is that the hover styling works, but when I click the element, it doesn't change to the active state until, still holding the mouse button down, I pull the mouse out of the element.
This is probably a result of my messing around with the event handlers on the page, but I'm just wondering if anyone else has come across this phenomenon and knows what it might be.
Edit
Here's what I'm working on: http://faithserve.com/jOS/
Click the "App" Menu, and click start. That button-ish thing is what I'm having the problem with.
You problem is the order of the css definitions. States have a particular order in which they need to be defined. See the end bit of this answer: https://stackoverflow.com/a/7508202/476786
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */
Note that the A:hover must be placed after the A:link and A:visited
rules, since otherwise the cascading rules will hide the 'color'
property of the A:hover rule. Similarly, because A:active is placed
after A:hover, the active color (lime) will apply when the user both
activates and hovers over the A element.
In your question you have them the correct way, so it can't be repro'd, whereas I have a demo here which shows the wrong way too: http://jsfiddle.net/pratik136/nbW6L/
/* Right */
div.right {
background-color:#fff;
}
div.right:hover {
background-color:#f00;
}
div.right:active {
background-color:#000;
}
/* Wrong */
div.wrong {
background-color:#fff;
}
div.wrong:active {
background-color:#000;
}
div.wrong:hover {
background-color:#f00;
}
You have to be sure CSS rule :hover is setted before :active. You could use that instead of just :active :
div:hover:active {
background-color:#000;
}
DEMO
Related
I have a wordpress website and I have a button in the header menu which is called 'Join as a tradesperson'.
http://prntscr.com/px7mdt
It has a green border and white background and the text is black.
I wanted the background of the button to change to green (color: #25ad00) and the text to change to white (color: #fff) when I hover over it.
I have added the following code to custom css is the dashboard:
body #menu-item-1847 a{
color:#000;
}
#menu-item-1847 a{
font-weight: 700;
border: 2px solid #25ad00;
border-radius: 5px;
padding: 2px 20px
}
#menu-item-1847 a:hover {
color: #fff;
background-color: #25ad00;
}
...but now when I hover over the button the background turns green but the text remains black:
http://prntscr.com/px7o9u
I was jut wandering what is wrong with the code as I thought the
#menu-item-1847 a:hover {
color: #fff;
...would change the color of the text to white when I hover over it?
Thank you
It's all about your DOM's CSS specificity you can make your code working without adding !important.
Just increase the CSS specificity. (share your HTML I will explain you this with CSS specificity)
Please read about CSS specificity. Using !important is not good practice. It is not clean code. Go through these articles.
Don't use !important instead increase CSS specificity
Is Using !important is a right choice?
To overwrite existing CSS, add !important like this:
#menu-item-1847 a:hover {
color: #fff!important;
background-color: #25ad00!important;
}
You can using !important statement like this.
(If you specified the selector correctly, if not, double check the selector #menu-item-1847)
#menu-item-1847 a:hover {
color: #fff!important;
}
It means, something like:
Use me, if there is nothing important else around!
I recently started to learn CSS and HTML and found this tutorial for a responsive navbar.
They show the mobile version of the navbar with the javascript function classList.toggle. Is there any way to animate this and add a transition?
function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");}
You can't animate the class attribute, but you can animate CSS properties.
You should have an initial CSS definition for your .topnav class, like this one:
.topnav {
background-color: black; /* Set an initial background */
transition: background-color 200ms; /* Tell browser to use a transition when background-color changed */
}
Thanks to this code, anytime the background-color of your .topnav element will change, a transition will occur.
You can for example add this CSS:
.topnav.responsive {
background-color: blue;
}
And this will work with your JS code.
Of course, my examples are basic and will just add a transition for the background-color, but it should help you about your problem :)
Following my code:
HTML:
<div>test</div>
CSS:
div:hover{
background-color: black;
}
How to disable temporary cursor when the cursor is over (even ignoring :hover) the div and enter key is pressed and reenable when the cursor is moved with pure javascript?
Well you could use CSS pointer-events which will stop all mouse events working, which includes :hover.
CSS
div:hover {
background-color:black; /* will not happen */
}
div {
pointer-events: none;
}
Demo
You can force specific cursor shapes with the CSS cursor attribute.
div {
cursor: pointer; /* or any other shape available in the link above */
}
Create a transparent gif and use this code:
cursor: url("transparent.gif"), default;
I was working on the customization of the template of my web and suddenly, the main menu for some specific pages get disturbed (the frontpage and some other pages are OK).
One of my changes disturbed the rest and I can't find the element that causes the problem.
I am searching for more than one hour already (via Firebug and the coding tool in Chrome "F12") and can't see it.
The first item in the menu had a different color and the border-bottom of the "li" elements of the submenu is bigger than it should be (has to be 1px).
I don't want to spam but I think it will be easier if I put the links:
frontpage: http://imagingshop.dreamhosters.com/ (menu = OK)
one of the problematic pages: http://imagingshop.dreamhosters.com/sharpzoom
--> you will immediately see the difference
the Contact, Services and Tutorials pages are ok, the problem is only at the Product pages.
Thanks a lot for your help.
This css
#main-menu .menu a.active-trail
{
color: #FFFFFF !important;
}
gives the white color to your product.
Change it like
#main-menu .menu a.active-trail
{
color: #AAAAAA!important;
}
Remove the class active-trail it makes your "products" text white.
You have a problem in file http://imagingshop.dreamhosters.com/sites/default/files/css/css_qLs_s8izWGQLERkNiGEldBLDTETyDfKs-iFsVg6MKfE.css:
main-menu .menu a.active-trail {
color: #FFF !important; <--- remove this line
#main-menu .menu a.active-trail {
color: #FFF;
}
Just remove !important from color attribute
css_qLs_s8izWGQLERkNiGEldBLDTETyDfKs-iFsVg6MKfE.css
#main-menu .menu a.active-trail {
color: #FFF;
background: #C00;
}
I have a page that scrolls sideways and I have a floating menu. I want the text in the menu to invert the color that is under it. Is there a way to do that with HTML5, Javascript, and/or jQuery?
Added: How would you invert an image when it goes over different parts of the page? CSS?
This is the bit of CSS I use for the menu
body{
background:#000;
font-family:Georgia;
font-size: 34px;
font-style: italic;
letter-spacing:-1px;
width:12000px;
position:absolute;
top:0px;
left:0px;
bottom:0px;
}
ul#banner{
position: fixed;
line-height: 45px;
margin: 0 30px; padding: 0;
}
step1. Get the position of your menu
step2. Remove your menu and get an element that is placed on the position
maybe you can use document.elementFromPoint
step3. Invert the element's color and apply it on your menu
step4. Show your menu again
step5. Repeat it whenever you need to change menu's color(scroll, etc.)
Try to use:
var color = // color in hex.
color ^ 0xFFFFFF (XOR bit operator) to get it?
I wrote a test page.
demo here.
inside body can't write width, or will make the page appears the scroll bar.
including the following knowledge point:
css cover:
.nav .selected .nav-01{background:#f93;}
.nav .selected .nav-02{background:#3c3;}
.nav .selected .nav-03{background:#36c;}
jquery plugin:
(function($){
$.fn.extend({
first: function(){ },
second: function(){}
});
}(jQuery));
jquery call
$(document).ready(function(){
$('#content').scrollPage({
pTag : '.list',
menu : '.nav',
speed : 600
});
})