I am trying to change the image buttons which is when selected by the user on navigation menu ie: When user hover it will change the button colour (I can do this OK) and the button effect will remain until the user selected the button (This I cannot do).
I try to use "current" or "select" element but it didn't work. Any suggestion?
I also wondering in term of building a navigation menu is it better to use "div" tag or would it be better "li" tag?
So far the HTML looks like this:
<body>
<div class="menuBar">
<div class="home"> </div>
<div class="about"> </div>
<div class="link"> </div>
<div class="contact"> </div>
</div>
<body>
And my CSS is:
#menuBar {
width:525px;
}
.home {
float: left;
margin-top: 0;
}
.home a {
background:
url("http://s20.postimg.org/eb5va917d/Gray_Nav_Over_01.jpg")
no-repeat scroll 0 0 transparent;
display: block;
height: 50px;
margin-left: 5px;
margin-right: 5px;
width: 180px;
}
.home a:hover {
background:
url("http://s20.postimg.org/h6iyh457d/Nav_Over_01.jpg")
no-repeat scroll 0 0 transparent;
}
.about{
float: left;
margin-top: 0;
}
.about a {
background:
url("http://s20.postimg.org/eb5va917d/Gray_Nav_Over_02.jpg")
no-repeat scroll 0 0 transparent;
display: block;
height: 50px;
margin-left: 5px;
margin-right: 5px;
width: 180px;
}
.about a:hover {
background:
url("http://s20.postimg.org/h6iyh457d/Nav_Over_02.jpg")
no-repeat scroll 0 0 transparent;
}
See fiddle.
EDITED: I have seen some people done it in JavaScript but I'd like to see it done in CSS preferably (Although you can show me other alternative in JQuery or other way)
Focus
element:focus is the pseudo class (.css selector) you are looking for.
Study here for more details : 6.6.1.2. The user action pseudo-classes :hover, :active, and :focus
Interactive user agents sometimes change the rendering in response to
user actions. Selectors provides three pseudo-classes for the
selection of an element the user is acting on.
The :hover pseudo-class applies while the user designates an element with a pointing device, but does not necessarily activate it.
For example, a visual user agent could apply this pseudo-class when
the cursor (mouse pointer) hovers over a box generated by the element.
User agents not that do not support interactive media do not have to
support this pseudo-class. Some conforming user agents that support
interactive media may not be able to support this pseudo-class (e.g.,
a pen device that does not detect hovering).
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses
the mouse button and releases it. On systems with more than one mouse
button, :active applies only to the primary or primary activation
button (typically the "left" mouse button), and any aliases thereof.
The :focus pseudo-class applies while an element has the focus (accepts keyboard or mouse events, or other forms of input).
Try this css :
.about a:active,.about a:focus {
background: url("path to your active-focus image") no-repeat scroll 0 0 transparent;
}
Here, i updated your jsFiddle so you get a live example.
First of all it's good have have LI as to it's like conforming to patterns in code.
Also it's recommended by W3C and that's how they build their samples: http://www.w3.org/wiki/Creating_multiple_pages_with_navigation_menus
As for code specific issue. You need to create active class in the CSS and have it added to you link onClick event:
CSS
.activeState {
background:url("http://s20.postimg.org/h6iyh457d/Nav_Over_01.jpg")
no-repeat scroll 0 0 transparent;
}
If the site structure is all static then when you land on Home.php, set the class for Home link to activeState. Similarly, when you land on other pages (say for example on
the About page) assign activeState class to About link.
Related
A normal website menu with decently sized buttons comprised of centred listed text inside blocks with background-color.
I need the buttons to change their background-color when hovered over, when pressed, and when the user is on the respective page.
HTML of the menu:
<div class="box box-menu">
<ul class="nav">
<li class="button button-activated">Home</li>
<li class="button">Gallery</li>
<li class="button">Commission Us</li>
<li class="button">Official Staff</li>
<li class="button">FAQ / TOS</li>
<li class="button button-last">Contacts</li>
</ul>
and its stylesheet:
.box-menu{
position: relative;
float: left;
width: 200px;
}
.nav{
text-align: center;
}
.button{
height: 70px;
list-style-type: none;
background-color: #141414;
color: #e8a53c;
font-size: 20px;
line-height: 60px;
vertical-align: middle;
text-shadow: 2px 2px black;
margin-bottom: 10px;}
.button-last{
margin-bottom: 0;
}
.button:hover:not(.button-activated):not(.button:active) {
background-color: #141414;
color: #901313;}
.button:active{
background-color: #761111;
}
.button-activated{
background-color: #901313;
color: #e8a53c;
}
:active is for the button as its being clicked.
button-activated is the class for the currently selected page.
A little needlessly confusing, but whatever.
I want the Activated button to NOT change color when its being hovered over.
I want the rest of the buttons to change color when they're being hovered over.
When the user presses a button, I want its :active (being clicked on) background-color - NOT its :hover background-color (since the user has his mouse on top of the button as he's pressing it).
One way I thought of resolving it was to use :not pseudos, but whenever I write multiple of them in one line the whole thing stops working altogether... It should work like:
"Button should change bg-color on hover - UNLESS it's being clicked on, and UNLESS it's specified as the page you're on."
Am I doing something wrong? Do I need to write them separately, one :not at a time?
The problem is not that you have multiple :not(), but that your second one is invalid.
In current CSS Selectors Level 3 specification1, not() only accepts simple selectors, and .button:active is a complex selector so your not(.button:active) is invalid and the whole rule is discarded.
But in your case, you really don't need that complex selector here, the simple :active will do, which gives you .button:hover:not(.button-activated):not(:active).
Here is a much simpler example still exposing the issue:
.foo:not(.bar):not(.foo:hover) { /* does not work */
color: red;
}
.foo:not(.bar):not(:hover) { /* does work */
background-color: green;
}
<div class="foo">hover me to remove stylings</div>
1 - Though next version 'CSS Selectors Level 4' now makes not()'s param a selector-list, so if I got it right, we should soon be able to pass complex selectors here.
With multiple css classes it's better to list with comma separation, rather than chaining them, as you've done with your pseudo-classes here.
.button:hover:not(.button-activated),
.button:hover:not(.button:active) {
background-color: #141414;
color: #901313;
}
However, with more complex classes and code in general, descriptive is often more useful than efficiency. Separating these own might be the way to go and still be functional, after having plugged this into a CodePen:
.button:hover:not(.button-activated) {
background-color: #141414;
color: #901313;
}
.button:hover:not(.button:active) {
background-color: #141414;
color: #901313;}
So below is my code. The "active" command in the css block works since when clicking on the div it changes color but when letting go of the click its border should become red as stated in the "target" command in the css block but it doesn't. Ideas?
<html>
<body>
<style type="text/css">
.svar-grid {
margin: 20px;
}
.svar-grid .svar {
padding: 10px;
text-align: center;
margin-top:20px;
width:100%;
border:2px solid black;
border-radius:10px;
background:yellowgreen;
}
.svar-grid .svar:active {
padding: 10px;
text-align: center;
margin-top:20px;
width:100%;
border:2px solid black;
border-radius:10px;
background:green;
}
.svar-grid .svar:target {
padding: 10px;
text-align: center;
margin-top:20px;
width:100%;
border:2px solid red;
border-radius:10px;
background:green;
}
</style>
<html>
<div>
<div class="svar-grid">
<div class="svar"><h4>Testing</h4></div>
</div>
</div>
:target applies to elements with an id attribute which matches the string that appears after the first # character in the URL. This is that that when you link to something specific on a page, it can be highlighted to draw the eye to it.
Since the element doesn't have an id, the :target pseudo-class cannot apply.
:focus applies to elements that have the focus. Clicking on an element will, generally, give it the focus … but only if the element is focusable in the first place.
The point of the focus is so that when interacting with a user interface without using a pointing device (e.g. a mouse, trackpad or touchscreen) you can move between interactive controls via some other mechanism (e.g. pressing the tab key). Then you can trigger (e.g. by pressing Enter) the focused element.
This is only useful if the element does something when triggered (e.g. if it is a link or a button). A div doesn't, by default, do anything when triggered. It is a generic container.
You can add interactivity to an element with JavaScript (addEventListener) and you can mark the element as being interactive by using the tabindex attribute … but you should usually pick a different element (like <button>) instead.
You are looking for :focus.
https://jsfiddle.net/s0L716zu/
HTML
<div class="svar-grid">
<div class="svar" tabindex="-1"><h4>Testing</h4></div>
</div>
CSS
.svar-grid .svar:focus { .... }
As you can see I added tabindex="-1" to the div because a div is not naturally focusable. Giving it -1 tabinde makes is focusable
Here is what :target is supposed to do https://developer.mozilla.org/en-US/docs/Web/CSS/:target, It is meant to be used with the URL
I am not sure why you need focus on the div or if there is any interaction with it. But if there are interaction with the div, you should probably use button or an anchor tag depending on its usage
In chrome the below button will retain it's outline after it has been clicked. If I looked at the buttons css settings after selecting the :active checkbox in chrome's developer tools I still can't see what the CSS values are for the outline. It appears to be about 1px in width and grey visually, but I don't see these values. Is there a way to see them?
<body>
<button style="background-color: aquamarine; margin-top: 50px; margin-left: 50px;">HI</button>
</body>
In other words google chrome does add this style (As indicated by one of the answer below):
:focus {
outline: -webkit-focus-ring-color auto 5px;
}
However when I click the focus checkbox in order to be able to see all the CSS that is triggered by focus, I don't see that style in the developer tooling pane ... Is it a google developer tooling bug or do other people see it?
There are actually two different styles that are automatically applied through through the user agent stylesheet to buttons; the pseudo-classes :focus and :active:
:focus {
outline: -webkit-focus-ring-color auto 5px;
}
button:active {
border-style: inset;
}
The :focus only applies to Chrome, and is responsible for the blue border you are seeing. Overriding this fixes the problem:
button:focus {
outline: none; /* Remove the outline */
}
button.active: {
border-style: none; /* Remove the border */
}
<body>
<button style="background-color: aquamarine; margin-top: 50px; margin-left: 50px;">HI</button>
</body>
You can see that the :focus is getting added in the Developer Console through the user agent stylesheet (just below the inline elements in this screenshot):
Hope this helps! :)
The styles console in the chrome developer tools only shows what is currently selected in it's current state. If you want to see the rules for the other states a simple way is to go to the css file it self. To do that next to the element class there is a link as shown in the image below. Clicking this will open the actual css file in the specific row of the selected class. Assuming the other states are declared close to that you'll be able to locate the class you want.
Can you post a link to the website?
In the meantime, I would suggest looking the "Computed" styles tab
Side note about why this might be happening--I've noticed sometimes I haven't been able to see the :active styles when it's JavaScript controlling the button's state
Edit: Hi Ole, I can see your demo, thanks.
Based on Obsidian Age's helpful reply, I ran this code snippet and it got rid of the borders on click. That's the behavior you want, right?
<body>
<style>
button:focus {
outline: none; // Remove the outline
border-top: none;
border-width: 0;
}
button.active: {
border-style: none; //Remove the border
}
</style>
<button style="background-color: aquamarine; margin-top: 50px; margin-left: 50px;">HI</button>
</body>
By looking in the "Computed" tab (next to "Styles" when you're inspecting an element in Chrome), I saw that there was a gray, 2px-wide border-top, -right, -bottom, -left for the button. For some reason it was enough just to set the border-top property to none and the border-width to 0. I don't know why but I tried a bunch of other combinations that didn't work--this did it with the least amount of CSS.
I want to create a nav bar that uses anchor links (the nav bar is fixed and the user stays on one page). By default, I'd like to have the first link in the nav bar styled with a background highlight to indicate it has been selected. If the user clicks on a different link on the nav bar, I'd like that link to be given the selection styling instead.
Is there a pure HTML/CSS method to do this?
Edit: I am currently tinkering with turning the nav links into secret radio buttons. I'll report back if I get it to work.
You can use the :active Selector.
a:active {
background-color: yellow;
}
This style will be applied to the last element you clicked on... once you lose focus though, it will not retain the style.
It would be much better to just change the class via javascript if you can, in my opinion anyway.
CSS
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + a {
background: blue !important;
color: white !important;
}
HTML
<input type="radio" id="x" name="selectedLink" checked />
<a href="#associatedAnchor1" onclick="document.getElementById('x').checked = true">
This is a link that will apply 'selected' style to itself and
strip the 'selected style from all other links in its group
</a>
<input type="radio" id="y" name="selectedLink" />
<a href="#associatedAnchor2" onclick="document.getElementById('y').checked = true">
This is a link that will apply 'selected' style to itself and
strip the 'selected style from all other links in its group
</a> <!-- and so on -->
It uses a tiny amount of JavaScript, but it's the closest thing to an answer that probably exists. Hope it's useful to somebody! :)
You can use :target and style with that. It would look something like:
li {
display: inline-block;
float: left;
border: 1px solid white;
}
a {
color: white;
text-decoration: none;
padding: 15px;
background-color: #bada55;
}
#targetDiv {
width: 50px;
height: 50px;
background-color: #bada55;
float: right;
border: 1px solid white;
}
:target {
background-color: purple !important;
}
<ul>
<li>First
</li>
<li>Second
</li>
<li>Third
</li>
<li>Target
</li>
<li>Target Div<li>
</ul>
The fiddle.
Note
This will interfere with the browser history, so you may want to watch out for that. It could also create a "jump", but if it's a fixed navigation you may be fine. The fiddle has a e.preventDefault() on the links to prevent the jump, but I think you could be fine without it.
UPDATED
Added a fiddle and included targeting other divs as per the comment.
I have this in line:
<div class="blue-car">
Car
</div>
<div class="iColor">
Blue
<div>
.blue-car:hover { color: red; }
.iColor:hover { color: read; }
I would like to make when someone hover to Car div second div which iColor change css and when hover to iColor div blue-car change css.
ie. I hover to 'Car' , 'Blue' will change color to red and when I hover to 'Blue' , 'Car' will change color to red, I want to make people aware that this two link is related.
I would love to have this in css only. No jquery. I have tried many no achievement at this moment.
Let me clear this, here is an example on this site. You could see when you hover to a country map, css link on right side will change, and you could see when you hover to a country link, country map css will change. This means this two div work each other. How they do this on this site: http://www.avito.ru
To start, CSS does NOT have a previous sibling operator. The only siblings that can be selected are adjacent (using +) or general (using ~).
It is possible to achieve the effect that you are seeking using only HTML and CSS. Below is one solution: http://jsfiddle.net/KGabX/. Basically, the .area is displayed as a table, which makes it wrap around the link and the image. However, the link is positioned absolutely, which prevents it from being "included" in a territory wrapped by the .area. This way, the .area is wrapped only around the image. Then, hovering over the .area we highlight the link. And, by hovering over the link we highlight the image.
Markup:
<div class = "area">
Link
<img src = "http://placehold.it/100x100" />
</div>
Styles:
.area {
display: table;
position: relative;
}
.area:hover > a {
color: red;
}
.area > img {
cursor: pointer
}
.area > a {
position: absolute;
right: -50px;
top: 50%;
font: bold 15px/2 Sans-Serif;
color: #000;
text-decoration: none;
margin-top: -15px;
}
.area > a:hover {
color: initial;
text-decoration: underline;
}
.area > a:hover + img {
opacity: 0.5;
}
Although I could not interpret what you wrote very well, I immediately noticed a flaw in your css selector.
Change your code to this:
<style>
.blue-car:hover a { color: red; }
.iColor:hover a { color: red; }
</style>
What's different about it? iColor:hover a. Look at the a, anchor selector. It was added because your previous CSS was only selecting the div. In css the child element, in this case the anchor, will supersede it's parents. There's two ways you can approach this. The first, or make the anchor tags color in css inherit.
If this wasn't your problem I'll fix my answer.
I'm not quite sure what you're asking because your question is a bit unclear.
From what I can understand, your issue stems from the fact that you're referring to the color property of the div, rather than the color property of the link.
That's a simple fix: all you need to do is drill down through the div to the link.
.blue-car:hover a{
color: red;
}
.iColor:hover a{
color: red;
}
Demo
Keep in mind that this isn't the best way to do this unless you absolutely need to refer to the links within the context of the div. I understand that your question fits into a broader context within your code, but for the example you gave here, all you really need is this:
a:hover{
color: red;
}
Again, I realize that you may need to change the colors or be more specific, but there's probably a better way to do this, even if that's the case.
The issue with this particular implementation is that your div is larger than your link, and a hover on your div is what activates the color change, so you'll run into this issue: