This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 1 year ago.
My scenario is I want the hover effects of the parent element to be applied to the child elements, effectively over-riding styling settings of the children, and I want to this to be strictly CSS. I can do it easily enough with javascript, but is there a pure CSS approach? Thanks for any suggestions.
div {
}
div:hover {
background-color: red;
/*change contained span backgound-color to red as well*/
}
span {
background-color: yellow;
}
<div>When I mouse over this div, I want the <span>the contained span background</span> to take on the hover settings of the parent div.</div>
If I understand your question correctly, then add another hover specifying all-child elements as *, applying the inheritance rule.
div:hover * {
background-color: inherit;
}
Snippet:
div {
}
div:hover {
background-color: red;
/*change contained span backgound-color to red as well*/
}
div:hover * {
background-color: inherit;
}
span {
background-color: yellow;
}
<div>When I mouse over this div, I want the <span>the contained span background</span> to take on the hover settings of the parent div.</div>
div {
}
span {
background-color: yellow;
}
div:hover span {
background-color: red;
/*change contained span backgound-color to red as well*/
color:#fff;
}
<div>When I mouse over this div, I want the <span>the contained span background</span> to take on the hover settings of the parent div.</div>
Related
So I have a div with class='content' and inside that, another div with attribute style='background-color:#FF0000' so my code looks like the following:
<div class='content'>
Here is some text outside the red background div
<div style='background-color:#FF0000'>
Here is some text inside the red background div
</div>
</div>
And in my stylesheet I have the following:
[style^='background'] {
color:#00FF00
}
This works and I get green text inside the red background. However:
:not([style^='background']) {
color:#00FF00
}
This still makes the red background text green, along with everything else in the document. I have tried the following:
div:not([style^='background']) {
color:#00FF00
}
.content :not([style^='background']) {
color:#00FF00
}
:not([style]) {
color:#00FF00
}
Yet all of these make the red-background text green, when clearly I have the :not selector.
However, I have elsewhere:
.content div:not([style^='text-align']) {
color:#1f1f1f;
}
.content div :not(span[style^='font-size: 150%']) {
color:#EEE;
}
And these work just fine.
So I don't understand why the red background div won't work at all and is selected by the :not selector?
Example:
:not(.content) {
color:#FF0000
}
<div class='content'>
Here is some text that shouldn't be red
</div>
color is an inherited property. So if your element has no color set, it inherits the color from the next ancestor element that has a color defined. In your example,
:not(.content) { color: #F00; }
this also targets the body element, so your div.content inherits color: #F00;.
To avoid this, specify inherited properties on the elements you don't want inheritance on.
.content { color: green; }
:not(.content) {
color: red;
}
<div class="content">
Here is some text that shouldn't be red
</div>
Quirks, tricks, and unexpected results of :not
:not(.foo) will match anything that isn't .foo, including <html> and <body>.
You need to increase specificity to avoid this, e.g. div:not(.content).
In addition:
div:not([style^='background']) {
/* also targets parent divs */
color: #00FF00;
}
.content :not([style^='background']) {
/* You have a space here - this targets _children_ of .content
that are :not([style^='background']. Is this what you want? */
color: #00FF00;
}
Remember that the "C" in "CSS" stands for cascading, and one aspect of that is inherited styles. Many styles (such as color) affect children of matched elements too, not just the element itself.
I know how to display one div when you hover over another using the CSS:
.showme {
display: none;
}
.showhim:hover .showme {
display: block;
}
<div class="showhim">HOVER ME
<div class="showme">hai</div>
</div>
But the new div is displayed underneath the hover div.
How can i have a div that when you hover it, displays another div that may be somewhere else on the page e.g above the hover one.
Rather than it displaying under the hover div.
If your HTML still looks like
<div class="showhim">HOVER ME
<div class="showme">hai</div>
</div>
In that case, you can just assign an absolute or fixed position to the div with class showme and still use the same CSS.
If the showme div cannot be a child of the showhim div, then you can try placing it as a sibling.
<div class="showhim">HOVER ME</div>
<div class="showme">hai</div>
Once that is done, you can modify your CSS in the following manner
.showme {
display: none;
}
.showhim:hover ~ .showme {
display: block;
}
The ~ can be used to select sibling elements that appear after the current element.
You can do something like this:
.showhim{
margin-top:50px;
}
.showme {
display: none;
}
.showhim:hover .showme {
display:block;
border:1px solid red;
position:absolute;
top:0;
left:0;
font-size:25px;
}
<div class="showhim">HOVER ME
<div class="showme">hai</div>
</div>
If Javascript is an option, you can easily toggle the display property like this:
var showmeElement = document.getElementsByClassName('showme')[0];
function toggleSibling(shouldShow) {
if(shouldShow) {
showmeElement.style.display = 'block';
} else {
showmeElement.style.display = 'none';
}
}
.showme {
display: none;
}
<div class="showme" onmouseover="toggleSibling(true)" onmouseout="toggleSibling(false)">B</div>
<div class="showhim" onmouseover="toggleSibling(true)" onmouseout="toggleSibling(false)">A</div>
Otherwise, with CSS, the only way to target showme using showhim is by sibling / children selectors, with showhim being higher in hierarchy (children) or simply higher in DOM (as siblings).
Keep in mind that CSS can not go upwards in DOM in order to style elements conditionally, but only downwards.
Basically you want to shift the child div above its parent when the parent is hovered. If you know about positioning then you can use it. If you don't know then follow this code snippet.
div{
height: 30px;
}
.parent:hover .child{
position: relative;
bottom: 30px;
}
.parent:hover + .brother{
position: relative;
left: 30px;
}
<div class="parent">
hoverme
<div class="child">hi</div>
</div>
<div class="brother">brother</div>
Here I assigned the child a relative position which allows you to move it relative to its current position and bottom property pushes it above 30px. Here if you don't want any overlapping then you will have to keep account for the height of parent or in this case parent div. relative position will be better then absolute. Also sibling movement is possible and is shown in the css.
I have two div elements with any type of children in it (like input and span) and I want to change the selection color of all child elements in my first div to red and in the second div to yellow.
The following does not work:
#my-div-1::selection
{
background-color: red;
}
#my-div-2::selection
{
background-color: yellow;
}
I can not use the selector like this:
::selection
{
background-color: yellow;
}
because this would overwrite the color of the second div and apply to the whole document.
You need to select all children elements where the selector should apply to. You can instead write the following:
#my-div-1 *::selection
{
background-color: red;
}
#my-div-2 *::selection
{
background-color: yellow;
}
How do I delete the background of my last DIV using class="item"?
Parent is: <div id="lastQuestions"></div>
jsfiddle
.item:last-child {
background-color: inherit;
}
Use pseudo element last-child
Here is a working jsfiddle
Alternatively, you could use a different html tag (like span, p or li displayed as block) for the.item elements instead of div to differentiate them from other div elements, and then you can do something like:
#lastQuestions li:last-of-type {
background: none;
}
to select it.
quick illustration
Edit:
Since, according to your jsfiddle, only .item elements are of type div in your code they already differ in type from all other children of #lastQuestions. So you can just try this:
#lastQuestions > div:last-of-type {
background: none;
}
DEMO
Consider the following example: (live demo)
HTML:
<div>
<p>
<strong>Stack</strong>
<span>Overflow</span>
</p>
</div>
CSS:
p {
background-color: #aaa;
}
span {
background-color: #777;
}
How could I make <span>'s width to be all the available space?
Note: <strong> and <span> should be on the same line.
If you want the items on the same line with the full width taken up you could do this.
http://jsfiddle.net/Sohnee/Gfyjc/
p {
background-color: #aaa;
}
strong {
float: left;
}
span {
display: block;
background-color: #777;
margin-left: 40px;
}
But a better alternative would be to get the background-color run from the parent element.
If you don't need the span to actually be that wide, only have it look like it is, you can simply give the <p> the background colour of the <span> in your example, and the <strong> the background colour of the <p>.
p {
background-color: #777;
}
p strong {
background-color: #aaa;
}
See this example.
This only works correctly as long as the <p> has a padding of zero, though. Otherwise, you'll need the solution with the float.
Use display: inline-block to have possibility to set size and keep element positioned as inline elements. Mathias example changed to use inline-block: http://jsfiddle.net/gXDjZ/7/
span is basically an inline element
making it a block element using display:block; will add a \n before n after the element
so making it a block will take the span to the next line and you can float:left; on its sibling and bring it back to the same line
something like this
strong{
background-color: #aaa;
float:left;
}
span {
display: block;
background-color: #777;
}
you can also use padding-right:__px; in span
so that it takes up the adjacent spaces
span{ padding-right:433px; }
http://jsfiddle.net/gXDjZ/15/