I'm wanting to basically make it so that on my website when the user clicks on a navigation bar button it changes the image. Of which on the image I have set the text on the button to display in a different colour.
So far I've developed the following css:
#HomeOver
{
width: 188px;
height: 54px;
background: url("Images/Navbar_01.gif");
}
#HomeOver:active
{
background: url("Images/NavbarOver_01.gif");
}
#HomeOver:hover
{
background: url("Images/NavbarOver_01.gif");
}
The HTML then links the ID to the CSS to display the correct image.. But my problem is, on the "active", it doesn't seem to work, Can anyone suggest what is wrong with the coding? The hover works fine
:active pseudo only works when an element is kept clicked, as soon as you leave the click, the effect goes, you can achieve the active tabs, by either using client side scripting such as JavaScript/jQuery and assign a class to the intended element, or assign it by using server side scripting such as PHP.
Demo (How actually :active pseudo works)
Achieving this with jQuery...
Demo
var active_menu = $('nav a').click(function(){ //onclick of a nested inside nav
active_menu.removeClass('active'); //Remove all the classes first
$(this).addClass('active'); //Assign the class to the a which is clicked
});
#HomeOver.active {
background: url("Images/NavbarOver_01.gif");
}
Then just add the "active" class to the navigation button either through JavaScript or directly in the html for the corresponding page.
As Mr. Alien stated the pseude class :active does only work as long as you keep the mousebutton clicked. To achieve a permanent active state you will have to use jquery to change the class on click.
jsfiddle
js
$('div').click(function() {
$(this).toggleClass('active');
});
css
div:active,
div.active {
color: #f00;
}
or you have to give the acitve element the .active class when generating it serverside with php or so:
print '<div' . (active ? ' class="active"' : '') . '></div>'
If you don't wish to use JavaScript you can instead use input:radio instead.
HTML
<div id="links">
<label><input type="radio" name="links" /><div class="image"></div></label>
<label><input type="radio" name="links" /><div class="image"></div></label>
<label><input type="radio" name="links" /><div class="image"></div></label>
</div>
CSS
#links input {
display: none;
}
#links .image {
background: url("Images/Navbar_01.gif");
}
#links label:hover .image,
#links input:checked ~ .image {
background: url("Images/NavbarOver_01.gif");
}
See test case on jsFiddle.
Use .addClass and .removeClass on click using jquery
Related
I know that press signal in css is :active, but i still can't find a proper way to make a toggle switch for the link.
For example, <a> has the color blue, when <a> will be pressed first time, it's color should be red, when it is pressed second time, it's color should blue again. So basically first press is a toggle switch from blue to red, and second is vice versa.
I have used :target action which didn't seem to work out:
a {
color: blue;
}
a:active {
color: red;
}
a:target {
color: red;
}
How could this be possible without use of JS? So i could toggle switch the link color to red on the first click, and then blue again at the second.
You can do it via checkboxes and labels.
HTML:
<input type="checkbox" id="t1" class="toggle">
<label for="t1">Link with toggling color</label>
CSS:
.toggle {
position: absolute;
left: -99em;
}
.toggle:not(:checked) + a {
color: blue;
}
.toggle:checked + a {
color: red;
}
Working example here.
This is not possible to achieve without JS. Links are not designed to be toggle elements, and CSS has nothing to track multiple clicks on an element (it is either being clicked or is not).
If you want to represent a toggle, then look at checkbox inputs instead. They have a :checked pseudo-class.
There is one way you could (sort of) achieve this purely with CSS but it would mean that, in its initial state the link would actually be unclickable, which probably wouldn't be desirable.
The trick is to set the pointer-events of the anchor tag to none, wrap it in another element with a tabindex attribute (to allow it to gain focus) and then, when the wrapping element receives focus, change the colour of the anchor and reset its pointer-events. On the next click, the link will receive focus but this will remove the focus from the wrapping element, which will revert the anchor's styles back to their initial state.
*{color:#000;font-family:sans-serif;outline:0;}
a{
color:#00f;
pointer-events:none;
}
span:focus>a{
color:#f00;
pointer-events:initial;
}
<span tabindex="-1">link</span>
I have a label with "for="the pointer to the checkbox input"" and as long as I know, this for can be added only for label. Therefore, I need to add inside of the label a <button>(I need it), but the click event isn't working properly - it doesn't check the checkbox the for is pointing to.
What are the possibilities I can use here if I must place <button> inside the label, with only html+css coding?
some code for example:
<input type="checkbox" id="thecheckbox" name="thecheckbox">
<div for="thecheckbox"><button type="button">Click Me</button></div>
It turns out you can make a <button> operate an input, but only if you put the <label> inside the <button>.
<button type="button">
<label for="my-checkbox">Button go outside the label</label>
</button>
<input type="checkbox" id="my-checkbox">
Although this contravenes the W3C specs:
The interactive element label must not appear as a descendant of the button element.
https://www.w3.org/TR/html-markup/label.html
You can do dis:
<label>
<button></button>
</label>
CSS
label {
cursor: pointer; // not necessary but probably a good idea.
display: block; // depending on your structure.
}
button {
pointer-events: none;
}
The display: block on label will only be necessary so that the bounding box of the label fully encapsulates it's children (the button in this case).
You can use transparent pseudo element that overlays the checkbox and the button itself that will catch mouse events.
Here's an example:
html:
<label>
<input type="checkbox">
<button class="disable">button</button>
</label>
css:
.disable{pointer-events:fill}
label{position:relative}
label:after{
position: absolute;
content: "";
width: 100%;
height: 100%;
background: transparent;
top:0;
left:0;
right:0;
bottom:0;
}
HTML:
<label for="whatev"
onclick="onClickHandler">
<button>Imma button, I prevent things</button>
</label>
JS:
const onClickHandler = (e) => {
if(e.target!==e.currentTarget) e.currentTarget.click()
}
Target is the click target, currentTarget is the label in this case.
Without the if statement the event is fired twice if clicked outside of the event preventing area.
Not cross browser tested.
The best solution is to style is like a button.
If you're using a CSS framework, like bootstrap, you can give the label classes such as btn and btn-default. This will style it like a button. You may need to adjust the css property of the line-height manually like so:
label.btn {
line-height: 1.75em;
}
Then, to get the on click styles as a button, add these styles:
input[type=radio]:checked ~ label.btn {
background-color: #e6e6e6;
border-color: #adadad;
color: #333;
}
This will take the input that is checked and give the next label element in the dom that has the class btn, bootstrap btn-default button clicked styles. Adjust colors as fit.
My aim is to make the p tag with show class get displayed when the span (with Show Me text) is clicked. I had tried to do this using the :focus pseudo-selector but using this method makes the p tag get displayed only till somewhere else is clicked, where the p tag gets hidden again.
Is there any way to make the :focus selector display even after clicking away (or) is there a different/better way (without using JS) to display the p when the Show Me is clicked and make it stay that way even after clicking outside?
Fiddle Demo
HTML CODE
<span class="span1" tabindex="0">Show Me</span>
<p class="show" >This will show on click</p>
CSS CODE
body {
display: block;
}
.show {
display: none;
}
.span1:focus ~ .show {
display: block;
}
The :focus pseudo-class will not work because, as the naming indicates, it is applicable only when the focus is on the element and there is no way to make the focus 'stick' even after we click elsewhere.
An alternate way of achieving this would be to use the :target [1] pseudo-class/selector. This would make the p display whenever the link is clicked, since it is deemed as 'the target'.
body {
display: block;
}
.show {
display: none;
}
#content:target {
display: block;
}
<a class="span1" href='#content'>Show Me</a>
<p class="show" id='content'>This will show on click</p>
[1] - :target selector is not supported by IE <= 8.
I have looked at several other questions but I can't seem to figure any of them out, so here is my problem: I would like to have a div or a span, when you hover over it an area would appear and would be like a drop down.
Such as I have an div, and I want to hover over it and have it show some info about the item I hovered over
<html>
<head>
<title>Question1</title>
<styles type="css/text">
#cheetah {
background-color: red;
color: yellow;
text-align: center;
}
a {
color: blue;
}
#hidden {
background-color: black;
}
a:hover > #hidden {
background-color: orange;
color: orange;
}
</styles>
</head>
<body>
<div id="cheetah">
<p>Cheetah</p>
</div>
<div id="hidden">
<p>A cheetah is a land mammal that can run up 2 60mph!!!</p>
</div>
</body>
</html>
But this ^ doesn't seem to work, I don't know why... and if there is a way to do that in CSS, I would like to know, but I want any and all suggestions.
You can achieve this in CSS only if the hidden div is a child of the element you use for hovering:
http://jsfiddle.net/LgKkU/
You cannot affect a non-child element using :hover from within CSS2, which is supported by all common browsers.
You can affect a sibling element using CSS2.1 selectors, like so:
a:hover + .sibling { ... }
However, this only works for direct siblings. This means you could have HTML like this:
<p>Cheetah <span class="sibling">Blah Blah Blah</span></p>
Notice that the a and the span are direct siblings.
Here's a fiddle showing the siblings working: http://jsfiddle.net/vUUxp/
However, not all browsers support the CSS2.1 sibling selectors, so you need to decide based on your target audience if you can use this or not.
Edit: Corrected my mistake on the CSS version for the + selector: it's 2.1 that defines it, not CSS3. I also added a link showing browser support. Otherwise, the answer is the same.
Or, if you're open to it, use jQuery.
Something like this would work:
$("#element") // select your element (supports CSS selectors)
.hover(function(){ // trigger the mouseover event
$("#otherElement") // select the element to show (can be anywhere)
.show(); // show the element
}, function(){ // trigger the mouseout event
$("#otherElement") // select the same element
.hide(); // hide it
});
And remember to wrap this in a DOM ready function ($(function(){...}); or $(document).ready(function(){...});).
You can absolutely do this in CSS3 now using the ~ adjacent sibling selector.
triggerSelector:hover ~ targetSelector {
display: block;
}
For example, if you want a tooltip to appear when hovering over an adjacent button:
.button:hover ~ .tooltip {
display: block;
}
I am familiar with using css and the 'hover' feature but I am interested in knowing how to use an on click feature.
So to begin with to use the hover feature you can have:
#test {
background: black;
height: 100px;
width: 100px;
}
and then when the mouse 'hovers' over I want it to turn white
#test:hover {
background: white;
height: 100px;
width: 100px;
}
So is the a similar way of changing the background on click?
Thanks!
James
The psuedo selector element:focus is used generally for when an element has focus. Like when you are typing inside a textarea or input.
As you can see in this demo, button:focus doesn't make the background-color any different onClick.
To make it change while being clicked, use the element:active pseudo selector:
button:active
{
background-color: #f00;
}
Working demo here.
So is the a similar way of changing the background on click?
You can use javascript for this.
Simpliest thing is to use some jquery
$('#test').click(function(){
css('background','green');
});
You can also change the class of an item once clicked. This way you can store the css in your styelsheet.
$('#test').click(function(){
$(this).addClass('greenBackground');
});
Your description is slightly vague but current CSS specs only provide the following related pseudo-classes:
:active - Applies briefly while the element is being clicked
:focus - Applies while the element is focused (mouse or not)