This question already has answers here:
CSS3 transform on click using pure CSS
(8 answers)
Closed 9 years ago.
Is it possible to affect one element by another element? I want to move .box element when I click on the link a.link.
I tried this, But couldn't get it to work. What should I write at link:active?
<html>
<head>
<style>
.box
{
height:100px;
width:200px;
border:solid red 5px;
}
.link:hover
{
color:red;
}
.link:active
{
color:grey;
}
</style>
</head>
<body>
<a href="#" class=link >CLICK ME</a>
<div class=box></div>
</body>
</html>
It's possible using sibling/child selectors. The selector has to include the element you're taking action on.
When you click on .link, you want .box to move. They're next to each other, so you can use the adjacent sibling selector .link:active + .box.
You can use transitions to animate the movement.
see: http://jsfiddle.net/2P4aA/2/
Related
This question already has answers here:
How to keep :active css style after click a button
(3 answers)
Closed 3 years ago.
My application has several buttons (say b1,b2,b3) which I am using as navigation menu items (alternate to using <a>). I want to change the color of the button when it is clicked/selected. When a particular button is clicked (say b1), its color should change to say red and all b2,b3 should have color grey. When b2 is selected, it should be red and b1 should switch back to grey. Is there a way I can do so using css and pseudo elements (something similar to :hover)?
A good strategy is to have a class isClicked which have the styles of the clicked element, and toggle everytime the element is clicked,say:
I use jquery to show the logic behind it :D
$('div').click(function(){
$('div.isClicked').toggleClass('isClicked')
$(this).toggleClass('isClicked')
})
div {
width: 100px;
margin:10px auto;
cursor: pointer;
text-align:center;
background-color:grey;
}
div.isClicked {
background-color:red !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>A</div>
<div>B</div>
<div>C</div>
This question already has answers here:
Add line break to ::after or ::before pseudo-element content
(8 answers)
Closed 6 years ago.
I am using the css after:: selecter to display texts. What I want to do is simply add a tag before this display. Cant get it to work
H2::after {
content: " <br>posted by me";
font-size: 14px;
}
<H2>Hello</H2>
you cannot add html tags inside content:"" of pseudo-element.
use display:block on the :after pseudo-element and you will get the desired result . see below :
H2::after {
content:"posted by me";
display:block;
font-size: 14px;
}
<H2>Hello</H2>
let me know if it helps
or you could use JQ if you REALLY want to include HTML tags
$("h2").after("<span style='color:red;font-style:italic'>posted by me</span>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<H2>Hello</H2>
If you're looking to break the "::after" onto a new line why not add a "display:block" rule?
h2::after{
content:"posted by me";
font-size:14px;
display:block;
}
This question already has answers here:
CSS :after not adding content to certain elements
(5 answers)
Closed 8 years ago.
I am styling the <hr> element with an pseudo element but Internet Explorer 11 doesn't support it.
This is how it should look like:
http://oi57.tinypic.com/23rsio2.jpg
hr {
height:1px;
background-color:#D1D1D1;
border:0; margin:30px 90px;
}
hr:after {
background:url('../images/hr.png') no-repeat top center;
content:"";
display:block;
height:30px;
position:relative;
top:-15px;
}
I hope someone can help me.
Thanks in advance!
Psuedo-elements are handled as children of the element they are attached do.
<hr>
<psuedo-element-after> image here </psuedo-element-after>
</hr>
This is not valid, because <hr /> doesn't allow children. Therefore, it won't work.
Consider applying the background image to the <hr /> itself, or use something like a class to do it, like this: <div class="divider"></div>
This question already has answers here:
Is there any way to hover over one element and affect a different element? [duplicate]
(2 answers)
Closed 9 years ago.
im trying to write a code where you hover over a div and have a completely different div change its effect
heres my code
html
<div class="a">LOREM IPSUM</div>
<div class="boxhighlight"></div>
css
.a:hover, .boxhighlight
{
background-color:black;
}
what i want to happen is that when the user hovers over the word lorem ipsum, the div boxhighlight will change its background color
is there a way to do this?
thanks
Use like this
<div class="a">LOREM IPSUM</div>
<div class="boxhighlight" >asdf</div>
Your css
.a:hover ~ .boxhighlight {
background-color:black;
color: white;
}
See this for your Reference
See example in this Fiddle
Change the selector to this:
.a:hover + .boxhighlight {
background-color:black;
}
The selector changes the styles of the element that has class boxhighlight that next to .a when hovered.
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 7 years ago.
I'm making a gallery where when you hover over the main image, the thumbnails should become transparent. I would like to achieve this with pure CSS, but I'm not sure if that's possible.
CSS:
/* should affect thumbs but not main */
/* obviously this code wouldn't work */
#main:hover, #thumbs {
opacity: .5;
}
HTML:
<div id="main">
Hover over me to change #thumbs
</div>
<div id="thumbs">
I change when you hover over #main
</div>
Is this possible using pure CSS?
Sure, just use the adjacent sibling selector:
#div1:hover + #div2 {
...
}
An example here: http://jsfiddle.net/6BfR6/94/
Only children of a selector can be affected. Otherwise, you'll need to use javascript.
For instance:
div:hover #childDiv {
background: green;
}
#div1:hover + #div2 {
...
}
it works fine in IE 7, 8, 9 and 10. No need to any JS or onovermouse and NOT ONLY children of a selector can be affected.
Try the example Link of "Nightfirecat".
even if it is, it will not work in IE :)
i would suggest using onmouseover event
however it is nice question and I am curious if someone has solution of doing it cross-browser via css
I think you're going to need some javascript for that.
No. You would have to use Javascript.