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.
Related
This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 8 months ago.
How to remove the element background color using browser extension for a online website? I want to remove this color for add this website in OBS?
I've tried this:
main-content wf100 {
background-color: transparent;
}
.main-content .wf100 {
background: transparent;
}
#main-content .wf100 {
background: transparent;
}
main-content and wf100 are two classes for the same element. So, the code will be like this--
.main-content.wf100{
background: transparent;
}
if this does not work, use this !important flag on CSS value.
Example--
.main-content.wf100{
background: transparent !important;
}
I think you need to use !important in end of your code
Example:
.main-content.wf100 {
background: transparent !important;
}
just write like this:
.main-content {
background-color: transparent;
}
if didn't work add !important after transparent
First, none of your selectors are applied. The first and third one aren't because main-content is a class, so you have to use .main-content.
The second one isn't applyed to your element because you added a space between .main-content and .wf100 wich means :
element with wf100 class inside a main-content element.
Without the the space (.main-content.wf100) you specify :
elements with main-content and wf100 classes.
Now your selector is correct, it still doesn't work. Why ? because inline css has the highest priority after !important property that you need to use here.
Because !important has the highest priority, you can apply it to .main-content.wf100 but also .main-content or .wf100.
/* wrong selector */
.main-content .wf100{
background-color:green;
}
/* correct selector, but not enough priority */
.main-content.wf100{
background-color:green;
}
.main-content.second-content{
background-color:orange!important;
}
.another-content{
background-color:yellow!important;
}
<div class="main-content wf100 "style="background-color:#172132;color:white;">wf100</div>
<br>
<div class="main-content second-content" style="background-color:red;">second content</div>
<br>
<div class="main-content another-content" style="background-color:red;">another content</div>
<br>
<div class="another-content" style="background-color:red;">another content without .main-content</div>
If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will "win", and its style declaration will be applied to that HTML element.
Inline Styles - 1000
ID selectors - 100
Classes, Attributes and Pseudo-classes - 10
Elements and Pseudo-elements - 1
So you can use !important for your CSS code.
.main-content.wf100 {
background: transparent;
}
The correct way to do this is to delete the inline css.
This question already has answers here:
What are the possible ways to hide an element via CSS [closed]
(7 answers)
Closed 1 year ago.
Hello guys I want to hide some content using CSS code. Can you guys tell me how to hide any div tag or span tag using CSS stylesheet?
Simply by using display: none; property. example
#selector { display: none;} or .selector { display: none;}
display: none;
use this css property for the div or span element.
Hide any content using Css display:none property
#hide{
display:none;
}
You also can Hide any property using JavaScript:
document.getElementById("hide").style.display = "none";
There are two ways to hide content using CSS
display:none and visibility:hidden the difference among two can be found here
I know that there does not exist a CSS parent selector, but is it possible to style a parenting element when hovering a child element without such a selector?
To give an example: consider a delete button that when hovered will highlight the element that is about to become deleted:
<div>
<p>Lorem ipsum ...</p>
<button>Delete</button>
</div>
By means of pure CSS, how to change the background color of this section when the mouse is over the button?
I know it is an old question, but I just managed to do so without a pseudo child (but a pseudo wrapper).
If you set the parent to be with no pointer-events, and then a child div with pointer-events set to auto, it works:)
Note that <img> tag (for example) doesn't do the trick.
Also remember to set pointer-events to auto for other children which have their own event listener, or otherwise they will lose their click functionality.
div.parent {
pointer-events: none;
}
div.child {
pointer-events: auto;
}
div.parent:hover {
background: yellow;
}
<div class="parent">
parent - you can hover over here and it won't trigger
<div class="child">hover over the child instead!</div>
</div>
Edit:
As Shadow Wizard kindly noted: it's worth to mention this won't work for IE10 and below. (Old versions of FF and Chrome too, see here)
Well, this question is asked many times before, and the short typical answer is: It cannot be done by pure CSS. It's in the name: Cascading Style Sheets only supports styling in cascading direction, not up.
But in most circumstances where this effect is wished, like in the given example, there still is the possibility to use these cascading characteristics to reach the desired effect. Consider this pseudo markup:
<parent>
<sibling></sibling>
<child></child>
</parent>
The trick is to give the sibling the same size and position as the parent and to style the sibling instead of the parent. This will look like the parent is styled!
Now, how to style the sibling?
When the child is hovered, the parent is too, but the sibling is not. The same goes for the sibling. This concludes in three possible CSS selector paths for styling the sibling:
parent sibling { }
parent sibling:hover { }
parent:hover sibling { }
These different paths allow for some nice possibilities. For instance, unleashing this trick on the example in the question results in this fiddle:
div {position: relative}
div:hover {background: salmon}
div p:hover {background: white}
div p {padding-bottom: 26px}
div button {position: absolute; bottom: 0}
Obviously, in most cases this trick depends on the use of absolute positioning to give the sibling the same size as the parent, ánd still let the child appear within the parent.
Sometimes it is necessary to use a more qualified selector path in order to select a specific element, as shown in this fiddle which implements the trick multiple times in a tree menu. Quite nice really.
Another, simpler "alternate" approach (to an old question)..
would be to place elements as siblings and use:
Adjacent Sibling Selector (+)
or
General Sibling Selector (~)
<div id="parent">
<!-- control should come before the target... think "cascading" ! -->
<button id="control">Hover Me!</button>
<div id="target">I'm hovered too!</div>
</div>
#parent {
position: relative;
height: 100px;
}
/* Move button control to bottom. */
#control {
position: absolute;
bottom: 0;
}
#control:hover ~ #target {
background: red;
}
Demo Fiddle here.
there is no CSS selector for selecting a parent of a selected child.
you could do it with JavaScript
As mentioned previously "there is no CSS selector for selecting a parent of a selected child".
So you either:
use a CSS hack as described in NGLN's answer
use javascript - along with jQuery most likely
Here is the example for the javascript/jQuery solution
On the javascript side:
$('#my-id-selector-00').on('mouseover', function(){
$(this).parent().addClass('is-hover');
}).on('mouseout', function(){
$(this).parent().removeClass('is-hover');
})
And on the CSS side, you'd have something like this:
.is-hover {
background-color: red;
}
In 2022:
This can be now achieved with CSS only, using the :has pseudo-class and the following expression:
div:has(button:hover) {}
Here's a snippet showcasing the original proposition:
div:has(button:hover) {
background-color: cyan;
}
<div>
<p>Lorem ipsum ...</p>
<button>Delete</button>
</div>
See browser support here. At the time of writing, all major browser support it—except Firefox, which still has a flawed experimental implementation.
This solution depends fully on the design, but if you have a parent div that you want to change the background on when hovering a child you can try to mimic the parent with a ::after / ::before.
<div class="item">
design <span class="icon-cross">x</span>
</div>
CSS:
.item {
background: blue;
border-radius: 10px;
position: relative;
z-index: 1;
}
.item span.icon-cross:hover::after {
background: DodgerBlue;
border-radius: 10px;
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: "";
}
See a full fiddle example here
This is extremely easy to do in Sass! Don't delve into JavaScript for this. The & selector in sass does exactly this.
http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand
This question already has answers here:
Including another class in SCSS
(6 answers)
Closed 8 years ago.
I have a certain question about applying styles to an element through another CSS class. To be more specific, lets have a look at following. I have div:
<div class="main"></div>
with some styles:
.main {
background: red;
display: inline;
/* some other styles */
}
and I want to apply .another class to the div, but via its .main CSS.
.main {
background: red;
display: inline;
.another
}
.another {
width: 50px;
height: 100px;
}
I assume that a preprocessor (SASS, Compass, etc.) is needed, but can someone advice if this is possible and what to keep in mind?
Thanks
You can assign multiple class to that div. so you can write like this and can apply class.
<div class="main another"></div>
No preprocessor is needed, you can group classes with .class.another, that's the same thing that css preprocessors does.
You can just add multiple classes in html, like <div class="main another and-other">...</div>. In css, you can just group the selectors, the inline order doesn't matter, but it's recommended to use most used class (main) first, and add more specific classes lower. But the order from top to bottom matters, lower in file the selector is, more important it is.
I've created a jsfiddle from your code, take a look. I've added background color so you see the difference, because width and height does not apply to inline elements.
You can merge the two styles like:
.main.another {
background: red;
display: inline;
width: 50px;
height: 100px;
}
This question already has answers here:
Can the :not() pseudo-class have multiple arguments?
(5 answers)
Closed 7 years ago.
I have this weird situation that I cannot make work :not that has two condition. Basically
I want to hide all div in a container except those having specific class.
For example this is the html
<div id="container">
<div class="show"></div>
<div class="extra"></div>
<div class="about"></div>
<div class="sample1"></div>
.
.
.
<div class="sampleetc"></div>
</div>
Now my css expression is like this , but it is not working
#container > div:not(.show), #container > div:not(.about){
display:none;
}
Any ideas why it is not working or good css expression for this, i presume, :not does not work with two condition, or i am guessing the first expression already hide .about
I believe you can just chain the :not selector like this:
div#container > div:not(.show):not(.about)
{
display: none;
}
It appears to work correctly on this fiddle.
This is what you want. Hide all inside the container but div.show and the next one
#container > div:not(.show) + div{
display:none;
}
DEMO