This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 5 years ago.
I am building a store website and I have problem with variations of the products. So I have the main product. I have 3 boxes with variations on color and when I hover them it changes the color, but the update of the site requires from me to change it from hoverable to clickable. It works when I change the CSS from
img:hover
to
img:active
but after the click the color returns to previous one. So can after click of the color to remain there instead of going back to previous color. And can it be done without JAVASCRIPT
.box {
position: relative;
width: 100px;
height: 100px;
background-color: #F4F4F4;
}
.box label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box input {
visibility: hidden;
}
.box input:checked + label {
background-color: red;
}
<div class="box">
<input type="checkbox" id="test">
<label class="color" for="test"></label>
</div>
:active means "while being clicked on", not "has been clicked on in the past". It is designed for such things as creating a 3D button depresses when you click on it effect.
CSS has no means to track state.
You might be able to hack something using :focus, but that is designed to indicate what you will activate if you were to press Enter, so is almost never a good choice for this sort of thing. It also only allows you to have one thing focused at a time.
If you want to track state for interactive things: use JavaScript.
CSS is not designed for that.
Related
This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 3 years ago.
Is there function like hover or something, which checks ifs special area (div or something) is clicked right now or not ?
I have some div's with some text and other data, and if i click 1 of them, i want it to do my special stuff after clicking.
For example there are 2 div's, if i click first it has to do something for me. (i have a lot of data in that div, not only textarea, input texts, also buttons etc.)
OR is it possible to check if Iclicked div's area? If yes i want to do transform:scale of its area in css (multiplying size)
.a:active{
color: brown;
background-color: yellowgreen;
}
<div class="a">
you text
</div>
How about :focus?
You do have to set the div's tabindex property to let it receive focus, however.
Example:
div {
height: 100px;
width: 100px;
border: 1px solid;
display: inline-block;
tabindex: 0;
}
div:focus {
transform: scale(1.5, 1.5);;
}
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
This question already has answers here:
Does opacity:0 have exactly the same effect as visibility:hidden
(9 answers)
Closed 5 years ago.
When i set the checkbox property "visibility: hidden" it acts like "display: none". Meaning it's is not visible and not accessible. For example in the code below i overlayed my checkbox over the text creating the effect that when the text is clicked the checkbox should be checked. Setting the "opacity:0" will create the effect for me. I just want an explanation why "visible:hidden" kinda removes the checkbox.
To test this you can remove the visibility property to show the checkbox
div {
position: relative;
width: 200px;
border: 1px solid red;
}
input {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
visibility: hidden;
height: 100%;
cursor: pointer;
/**opacity: 0;**//**I can use this instead tho**/
}
<div>
<input id="units" type="checkbox" value="13"><span class="btn">TEST</span>
</div>
hi this link will show you the differences between them it has good examples
CSS : Visibility, Opacity and Display
First things first!
Ingredients: We have a <input type="text"/>.
Problem: Every time the user types, delete or change a letter, under the text area must grow a line, as shown in the visual demo. I imagined different solutions:
dynamic size: the part of the line that adds/deletes/changes to the precedent one has the exact width of the letter added/deleted/changed.
static size: the part of the line that adds/deletes/changes to the precedent one doesn't count the exact width of the letter added/deleted/changed.
Question: How can I achieve one of those goals with HTML5 + CSS3 (preferibly without using javascript/jQuery) so the underline will grow (from left to right) while the user changes the text inside the input? I'M ASKING FOR THE ANIMATION.
Actual visual DEMO: From first to the last step, the user is typing, then he finished and as last, he delete everything.
[EDIT]: Note that the placeholder word in the visual demos is not random: the input tag contains everything, so if the user types something, then the underline is present and showed with the animation I'm asking for, otherwise the placeholder without any underline is showed. What I'm asking is the animation/transition! The underline of the input tag will seems to the user like it's growing/decreasing.
Just use css text-decoration property of input field
input {text-decoration: underline; }
Use this to achieve your requirement
not sure if i understood what you want. but it seems kind of simple. just use this
input {
text-decoration:underline
}
<input type="text" placeholder="insert text">
EDIT : sorry for the duplicate answer . Stackoverflow went in maintenance
mode while i was answering and the answer appeared now
This is possible trough the use of pseudo-elements , some CSS trickery for the width and a :hover setting for your anchor, to control your pseudo-elements.
.link {
text-decoration: none;
position: relative;
color: tomato;
}
.link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 2px solid #3366FF;
transition: 0.4s;
}
.link:hover {
color: blue;
}
.link:hover::after {
width: 100%;
}
<a class="link" href='#'>This link here</a>
My code looks like this:
<div class="hovereffect">
<img class="img-responsive" src="/some-image" alt="">
<input type="checkbox" class="img-checkbox">
</div>
.hovereffect {
width: 100%;
height: 100%;
margin-bottom: 20px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .img-checkbox{
position: absolute;
width: 18px;
height: 18px;
top: 3px;
right: 5px;
cursor: pointer;
}
So there is the checkbox in the right upper corner over the image and would like to extend the clickable are to the whole image for a better user experience.
As you can see the checkbox has no label and I would like to achieve the goal without a label.
I tried tricks with the ::after element which kinda worked with chrome but not really with firefox and I couldn't make the clickable area responsive that is to say, extend to the whole area of the image.
Can you use Javascript/jQuery?
You can start by assigning unique id to every image you have (Ex: img1,img2,img3) and every checkbox associated to the image (Ex: img1-checkbox).Then you can use the code below:
$('#img1').click(
$('#img1-checkbox').attr('checked', true);
);
Or something like that.
This has been a problem since a very long time and you simply cannot achieve your goal with pure css. The only available ways of getting it done are ou using label or jquery/javascript or :after pseudo class.
If you want to expand the checkbox size, then try this:
.hovereffect input[type=checkbox]
{
width:100px !important; //adjust as per need
height:100px !important; //adjust as per need
}
This will increase the clickable area of the checkbox field. Working Link
But, if you want the checkbox to be transparent and show the image behind, then you will have to use label and set it's background color to transparent.
I'm waiting to see someone prove me wrong with working code.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Are HTML Image Maps still used?
I have an image:
Which I want to bind a function to when clicked. The problem I have is the div underneath it when clicked needs to fire another function and because of the blank space underneath the top div it's messy.
I'm aware that html image mapping can solve this problem but I understand this is now deprecated. is there an alternative I can use?
I've re-read and I think I understand your issue more fully.
Check this jsFiddle: http://jsfiddle.net/5p9DE/
and this almost identical one so you can see the #phone div: http://jsfiddle.net/BPbk6/
and for completeness, the code:
CSS:
#container {
position: relative;
}
#phone {
position: absolute;
top: 34px;
left: 70px;
width: 250px;
height: 25px;
-webkit-transform:rotate(-11deg);
}
#phone a {
display: block;
width: 250px;
height: 25px;
}
#phone a span {
margin-left: -9999px;
}
HTML:
<div id="container">
<div id="phone"><span>Link text</span></div>
<img src="http://i.stack.imgur.com/8GvME.png">
</div>
And, as others have said, you still can use HTML image maps. This is a CSS alternative.
It is a bit hard to tell exactly what you are trying to achieve from that image and the description, but i will give it a try.
The way i usualy approach this, is by slicing the image. Make a separate image from the actual background and the area you want to be clickable. Then you add the clickable image as a background to a <a> tag linking to whatever you desire, and position it correctly (probaly absolute to the parent with the background) using some css. If you can show us some actual code on something like fiddle i can demonstrate what i mean...