I understand that I can change another element's style when hovering on a different element like this:
.element-one:hover .element-two {
opacity: 0.8;
}
But how can I change the style of all the elements in the page except element-two when I hover on element-one?
You can use .element-one:hover :not(.element-two).
Here is an example:
.element-one:hover :not(.element-two) {
opacity: 0.8;
}
.element-one {
background: black;
margin: 10px;
}
.element-one div {
background: green;
border: 1px solid blue;
margin: 10px;
padding: 10px;
}
<div class="element-one">
<div class="element-two">
element-two
</div>
<div class="element-three">
element-three
</div>
<div class="element-four">
element-four
</div>
</div>
However - note that it will work only for elements inside element-one and not for all the elements in the page.
You can do this with body for example, but the problem there is that .element-two is probably also inside some other element that exists inside body, and in such case the .element-two will get the opacity from it's containing element.
Related
I want to select the first and the last child with CSS but it does not work. Please take a look at my Fiddle and help me:
.area {
height: 100px;
width: 100px;
}
.area:first-child {
background-color: red;
}
.area:last-child {
background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
https://jsfiddle.net/rbw8dpsb/1/
I advise you to add a container as in your code they are childs of body BUT you don't know the last-child or the first-child of body as you may have other elements like script tags or other tags dynamically added (like in the snippet here or with jsfiddle or any other online coding tools).
.area {
height: 100px;
width: 100px;
}
.area:first-child {
background-color: red;
}
.area:last-child {
background-color: green;
}
<div>
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
</div>
Here is a screenshot to show what is inside your body when you run the snippet:
As you may clearly notice, there is a div added at the end which is the last-child of the body. Adding a container will avoid you dealing with random settings and hidden elements added.
If you don't want to let all that divs in another structure you should use first-of-type and last-of-type instead of first-child and last-child
.area {
height: 100px;
width: 100px;
}
.area:first-of-type {
background-color: red;
}
.area:last-of-type {
background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
As Temani Afif pointed, this solution is arbitrary and may not work in all the situations. As shown, it is not properly working on the code snippet but it does on JSFiddle for example. I.E. https://jsfiddle.net/vm1scerv/
I m having problem with css of a tooltip. Tooltip belongs to an input field and if an other checkbox is checked, this tooltip needs to be placed correctly on the input field. so the check box is :
<input type="checkbox" id="telefonBox" />
and the input field which tooltip needs to be placed :
<input type="text" class="form-control tooltip-berater" id="agentName"/>
What i tried is
input[id=telefonBox]:checked + .tooltip-berater + .tooltip > .tooltip-inner {top: 875px !important; left: 30px; max-width:300px;}
(Basically i m trying to write: if a checkbox with this id checked, then do some stuff in this css classes)
But doesnt function at all. What am i missing?
If both inputs are children of the same div, but not directly next to each other (in the HTML markup) then you need to use ~ operator instead of +.
+ works like:
<div class="parent">
<div class="first"></div>
<div class="second></div>
</div
.first + .second {
// do stuff with second
}
~ works like:
<div class="parent">
<div class="first"></div>
<div class="inbetween"></div>
<div class="second"></div>
</div
.first ~ .second {
// you can still do stuff with second
}
There is no selector which would help you in other cases possible in your HTML markup, especially:
When .second div is placed earlier than .first
When .second div has different parent from .first
In those cases you will need to use JavaScript to select and change your element's CSS.
Heres a fiddle i made that changes colour of input box: https://jsfiddle.net/8we5u1vs/
Is that the kind of thing you want? Obviously its much simpler than what you're talking about. You havnt added much code so hard to tell, could you show code or fiddle for an example of the tooltip?
input[id=telefonBox]:checked + .tooltip-berater {
background-color:red;
}
You can try this way, but text input is still available via tab key.
div {
display: inline-block;
position: relative;
line-height: 1.25em;
border: 1px solid;
background: white;
}
input[type=text] {
border: 1px solid white;
line-height: inherit;
}
span {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
text-align: center;
display: none;
border: 1px solid white;
background: white;
}
input[type=checkbox]:checked + div span {
display: block;
}
<input type=checkbox>
<div>
<input type=text>
<span>N/A</span>
</div>
I would like to know how to update image A when I hover over image B using only CSS, is it possible? if not how will I do that using only pure JavaScript (no library). But css is really what I want to use....
This depends entirely on your mark-up, as I pointed out in the comments. In the absence of seeing any mark-up to work with, I can only post some general suggestions; however it's important to note that the element you want to affect (F) must appear later in the DOM (be a child of the element F, or be subsequent sibling, or descendant of a subsequent sibling) than the element E with which you want to interact.
That said, the following approaches will work, with the associated mark-up:
Sibling-based selection:
Hovering over the first img inside of #a toggles the display of the subsequent img elements, using the E ~ F (general sibling) combinator:
<div id="a">
<img src="http://www.lorempixel.com/200/400/nature" />
<img class="first" src="http://www.lorempixel.com/200/400/people" />
<img class="second" src="http://www.lorempixel.com/200/400/sports" />
</div>
#a img.second,
#a img.first:hover ~ img.second {
display: none;
}
#a img:hover ~ img.first {
display: none;
}
#a img:hover ~ img.second {
display: inline-block;
}
JS Fiddle demo.
Hovering over #a changes switches the display of the .first and .second images inside of #b, using the E + F (immediate sibling) combinator:
<div id="a">
<img src="http://www.lorempixel.com/200/400/nature" />
</div>
<div id="b">
<img class="first" src="http://www.lorempixel.com/200/400/people" />
<img class="second" src="http://www.lorempixel.com/200/400/sports" />
</div>
#a,#b {
float: left;
border: 1px solid #000;
padding: 0.2em;
}
img.second {
display: none;
}
#a:hover + #b img.first {
display: none;
}
#a:hover + #b img.second {
display: inline-block;
}
JS Fiddle demo.
Descendant-based selection:
Using the E F general descendant combinator (I'm not actually entirely sure a space character is a combinator, but regardless...it's based on F being a descendant of E):
<div id="a">
<img class="first" src="http://www.lorempixel.com/200/400/people" />
<img class="second" src="http://www.lorempixel.com/200/400/sports" />
</div>
#a img.second {
display: none;
}
#a:hover img.first {
display: none;
}
#a:hover img.second {
display: inline-block;
}
JS Fiddle demo.
Using E > F the immediate-child/immediate-descendant combinator:
<div id="a">
<img class="first" src="http://www.lorempixel.com/200/400/people" />
<div>
<img class="second" src="http://www.lorempixel.com/200/400/sports" />
</div>
</div> div {
display: inline-block;
}
img {
display: none;
border: 1px solid #000;
padding: 0.2em;
}
#a > img {
display: inline-block;
}
#a:hover img {
display: inline-block;
}
JS Fiddle demo.
There's also the chance to use pseudo-elements and css-generated content (in compliant/up-to-date browsers):
<div id="a"></div>
#a {
width: 200px;
height: 400px;
background-image: url(http://www.lorempixel.com/200/400/people);
background-repeat: none;
background-position: 50% 50%;
position: relative;
}
#a:hover::after {
content: url(http://www.lorempixel.com/200/400/animals);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 100%;
}
JS Fiddle demo.
In your particular case it's easy, since #bg is a child of #hv
Just change your hover selector from what you have to this:
#bg:hover #hv {...}
See my fork of your fiddle here: http://jsfiddle.net/xJSQt/
To update the background position on the inner element #hv when hovering the outer element #bg, you can:
See this Working Fiddle Example!
#bg:hover #hv {
...
}
Simple. Let´s suppose you have a div like this:
<div class="myImage">
So, in CSS you set the normal background image, and then you use the :hover pseudo-element to change it to your desired rollover image. Something like:
.myImage{ background-image: url(imageA.jpg);} /*Set the normal image*/
.myImage:hover{ background-image: url(imageB.jpg);} /*Set the rollover image*/
I have a parent div, that holds three div's. They are basically columns. I need to remove the margin on the last one but can't get the right selector
HTML:
<div class="productContainer">
<div class="productBox"></div>
<div class="productBox"></div>
<div class="productBox"></div>
<!--/ productContainer --></div>
Here's the CSS:
.productContainer {
width: 980px;
height: 400px;
display: block;
float: left;
}
How do you target the third child div of a parent? this should work no?
.productContainer > .productBox {
width: 320px;
height: 400px;
display: block;
float: left;
margin: 0 10px 0 0;
}
.produtContainer > .productBox nth:child(3) {
margin-right: 0;
}
While you can use the :last-child selector, it's not going to work in any version of IE before 8. Generally what I do in this situation is add a last class to the last element in the list:
<div class="productContainer">
<div class="productBox"></div>
<div class="productBox"></div>
<div class="productBox last"></div>
And then add this rule below the .productContainer .productBox rule in the stylesheet:
.produtContainer .last {
margin-right: 0;
}
.productContainter div:last-child
You can do :first-child or :last child to target the first and last element.
compatibility: http://www.quirksmode.org/css/contents.html
You can use :last-child selector for the rule
.productContainer div:last-child
{
// rule
}
http://www.quirksmode.org/css/firstchild.html
You can use the last-child pseudo-selector in this case...
.productContainer > .productBox:last-child {
margin-right: 0;
}
Note: This will not work in IE8 and older, as this is a part of CSS3. For something more portable, you might want to try this...
<div class="productBox last"></div>
.productContainer > .productBox.last {
margin-right: 0;
}
Can somebody please explain what the inherit keyword means in CSS and how it works?
It will use the same value as the same property its parent has.
body {
margin: 234px;
}
h1 {
margin: inherit; /* this equals 234px in this instance */
}
<body>
<h1></h1>
</body>
If there are multiple instances of <h1> in the file, it will take the margin of its parent, so 234px is not always the value it will have. For example:
<body>
<h2></h2>
<div>
<h2></h2>
</div>
</body>
body {
margin: 20px;
}
div {
margin: 30px;
}
h2 {
margin: inherit; /* 20px if parent is <body>; 30px if parent is <div> */
}
To clarify, inherit doesn't do anything unless you're using it to override another style rule, otherwise it's just reinforcing the default behavior. Note that the overriding rule should be higher specificity or be below the rule that it overrides.
.pink {
background-color:pink;
}
.green {
background-color:lightgreen;
}
.override {
background-color:inherit;
}
<div class="pink">
<p class="green">I'm classed "green", and I am green.</p>
<p class="green override">I'm also classed "green" but `inherit` overrides this and causes me to inherit pink from my parent.</p>
</div>