I'm wanting to do this transition effect, but it only works on the first div, on Monday that aims to affect the first, nothing happens.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
#firstElement:hover + #secondElement {
color:red;
}
#secondElement:hover + #firstElement {
color:blue;
}
</style>
</head>
<body>
<p id="firstElement">Hover</p>
<p id="secondElement">Hello</p>
</body>
</html>
Why this doesn't work should be clear from the other answers. Here's a solution.
<div id="elements">
<p id="firstElement">Hover</p>
<p id="secondElement">Hello</p>
</div>
CSS
#elements:hover #secondElement:not(:hover) {
color:red;
}
#elements:hover #firstElement:not(:hover) {
color:blue;
}
DEMO
first you need to set transition (if you mean transition and not hover) to the elements like this:
#firstElement:hover + #secondElement {
color:red;
transition:color 0.5s ease; /* this is an example */
}
#secondElement:hover + #firstElement { /* this is not right selector */
color:blue;
transition:color 0.5s ease; /* this is an example */
}
and second there is no backward in CSS, you can just change color of second element by hovering first element.
for doing that you can to use jQuery.
use this JQuery code:
$("#secondElement").hover(function(){
$("#firstElement").toggleClass("firstcolor");
});
and add this CSS:
.firstcolor{
color:blue;
}
here is DEMO
note: this is not only way
From Adjacent sibling selectors
Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).
This means #firstElement precedes #secondElement, therefore it works.
But #secondElement doesn't precede #firstElement, therefore it doesn't work.
the psuedo hover effect only works on parent-child relationships.
so if you have a menu where Toys is the parent, and barbie dolls, car trucks, and legos are the 3 child elements, you can do psuedo classes.
For example if you did
#toys:hover #barbiedolls { background: red; }
that would work. But if you tried doing
#barbiedolls:hover #toys { background: red; }
that would not work. Neither would
#barbiedolls:hover #cartrucks { background: red; }
Related
I would like to know how we can implement this code to work in chrome browser,
/* Selects any element with right-to-left text */
:dir(rtl) {
background-color: red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/:dir
what is the alternative in Chrome Browser?
Since you're using the dir HTML attribute, you can use a CSS attribute selector to style that element accordingly. In case it is not obvious, this is not the same thing as the :dir() pseudo-class in CSS. Attribute selectors are widely supported across all modern browsers.
For Chrome, you may need to apply the element to the <body> instead, or be prepared to use body { background-color: inherit; }:
html[dir="rtl"] {
background-color: red;
}
body {
background-color: inherit; /* Required for Chrome */
}
<html dir="rtl">
<body>
<div>A red document background</div>
</body>
</html>
You don't have to apply it to the whole document either, of course. You can apply it to a specific element only:
div[dir="rtl"] {
background-color: red;
}
<html>
<body>
<div>A white background</div>
<div dir="rtl">A red background</div>
</body>
</html>
If you would like to use JavaScript to detect the dir attribute, you can do so this way (or Google for your favorite way to detect an element via JS... there are at least half a dozen different ways):
/* EcmaScript 6 required, which shouldn't be an issue for modern Chrome, Firefox, Edge, etc. */
const doc = document.querySelector('html');
if (doc.hasAttribute('dir')) {
const textDir = doc.getAttribute('dir');
if (textDir == 'rtl') {
doc.classList.add('rtl');
} else {
doc.classList.add('ltr');
}
}
.rtl {
background-color: red;
}
body {
background-color: inherit; /* again, only needed for Chrome */
}
.ltr {
/* whatever styles you want for LTR text direction */
background-color: green;
}
<html dir="rtl">
<body>
<div>A red document background</div>
</body>
</html>
:dir() is indeed very useful since it refers to the direction of the element even if inherited from the parent or ancestor, but unfouruntately it's only supported in Firefox as you mentioned.
[dir="rtl"] is supported cross-browser, but it only refers to elements that have this specifically. If the entire document is one direction and it is specified in either the <html> or <body> tag, then that's not a big problem since you can simply use the descendant selector. For example
[dir="rtl"] p {
background: red;
}
However, this becomes complicated in a bidirectional document with nested sections. For example
<body dir="rtl">
<p>עברית (RTL text)</p>
<div dir="ltr">
<p>English (LTR text)</p>
<div dir="rtl">
<p>עברית (another RTL text)</p>
</div>
</div>
</body>
Sure, you can apply style rules to both directions like this
[dir="ltr"] p {
background: green;
}
[dir="rtl"] p {
background: red;
}
but CSS does not care which ancestor is closer, so the code above would still apply red to all paragraphs (and even reversing the order of rules wouldn't help for the nested section).
What you can do in this case is using CSS variables, which are inherited. For example
[dir="ltr"] {
--p-background: green;
}
[dir="rtl"] {
--p-background: red;
}
p {
background: var(--p-background);
}
In this case the variable is applied directly to the element with the specified direction, then the variable value is inherited through the element chain the same way the direction itself does, and affects the styling of the element defined to use the variable value - in this example the <p> element.
I'd like to make all div tags invisible except for the one I mark active in html. Below is an extract from my page:
<div id="container">
<div id="1">
invisible
<div>invisible</div>
<div>invisible</div>
</div>
<div id="2" class="active">
visible
<div>visible</div>
<div>visible</div>
</div>
..or via javascript dom:
document.getElementById("2").classList.add('active');
The expected behavior is that just changing the class will render all "active" classes visible and all unmarked classes invisible at all times.
My first attempt, before adding the parent container and selecting with it,
<style type="text/css">
div { display:none; }
div.active { display:block; }
</style>
did not work. It made all divs invisible.
This second attempt, accurately selecting what I really wanted to select, works fine:
<style type="text/css">
div#container>div.active { display:none; }
div#container>div { display:block; }
</style>
Is this the right way to override a default style?
You can use the :not(selector) selector. Reference: w3schools.
Just add to every div yourChoice + active classes and when you want them to disappear, remove the yourChoice class. Then with the :not(.active) { display: none } they are all gone.
Here's a codepen https://codepen.io/sebaLinares/pen/EddNbQ
Hope it's useful
This is an image of my code. I have a footer-container inside which there are several footer-content classes, each of which contains a <p> tag and then a <span> tag. I want to apply a style to span of the last footer-content
This is what it looks like I want to remove the last - after risk analysis
I have tried this
.footer-container:last-child :last-child {
display: none;
}
but this hides all the span tags
Edit: To create those dashes between your entries, instead of creating those span.footer-dash at all, you can do that using CSS only:
.footer-content:not(:last-child) .footer-item::after {
content: "-";
color: #666;
padding: 0 20px;
}
Apply styling as needed. The selector makes sure the dash isn't added after the last element at all, so no need to hide anything if it's not there in the first place.
:last-child asks Am I the last child of my parent?, not Who is my last child element? (which your selector suggests you think).
So either use the descendant selector (space):
.footer-container :last-child :last-child {
display: none;
}
or use it on the correct child elements:
.footer-content:last-child :last-child {
display: none;
}
Please note that usage of :last-child should be made carefully as it ties your stuff very closely to the DOM structure (which you might want to change later).
I'd suggest you change it like this:
.footer-content:last-child .footer-dash {
display: none;
}
The :last-child CSS pseudo-class represents the last element among a group of sibling elements.
/* Selects any <p> that is the last element
among its siblings */
p:last-child {
color: lime;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child
That selector should be
.footer-container :last-child :last-child { ... }
(space after .footer-container)
I think this should help you
.footer-container .footer-content:last-child{
background-color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Css practice</title>
</head>
<body>
<div class="footer-container">
<div class="footer-content">
<p><span>Section Number 1</span></p>
</div>
<div class="footer-content">
<p><span>Section Number 2</span></p>
</div>
<div class="footer-content">
<p><span>Section Number 3</span></p>
</div>
<div class="footer-content">
<p><span>Section Number 4</span></p>
</div>
</div>
</body>
</html>
You can just add:
.footer-container .footer-content:last-child .footer-dash {
display: none;
}
As per the Q - I want to remove the last - after risk analysis
This will just work fine for you. This will also prevent other elements from being affected by your :last-child CSS selection if you change the order of the content inside the .footer-content.
Try this:
.footer-container .footer-content:last-child span {
/* css here */
}
This code should work:
.footer-container:last-child>:last-child {
display: none;
}
Using a space will target all the elements that are last children inside .footer-container:last-child, while using > will target the last child of
.footer-container:last-child only.
I have a really simple example below of what I am trying to do, and a fiddle here
<html>
<head>
<style>
#testDiv{
display:block;
}
#hiddenDiv{
display:none;
}
#testDiv:hover + #hiddenDiv{
display:block;
}
</style>
</head>
<body>
<div id="testDiv">
<h1>Hello World</h1>
<div id="hiddenDiv">
<h2>Hidden normally</h2>
</div>
</div>
</body>
</html>
Basically, when I hover over the #testDiv, I want to display #hiddenDiv. I need to put the div I wish to display inside #testDiv or else it won't be accessible when I move the mouse onto it.
Is this possible with CSS, or will I need to use Javascript?
I don't see the display changing in Google Chrome, but in case you have something else changing it in your scenario, you could try this:
http://jsfiddle.net/RDBf9/
What I did was add another style only for the testDiv hover
#testDiv:hover{
display:list-item;
}
Update
In your updated scenario, testDiv became a parent ( congratulations! ) of hiddenDiv.
So you need to select the hiddenDiv that has a hovered parent with id testDiv, like this:
#testDiv:hover #hiddenDiv{
display:block;
}
P.S: In CSS, selectors are readed from right to left. That is the order browsers read them too.
This CSS from your example:
#testDiv:hover + #hiddenDiv{
font-weight:bold;
}
is saying:
any time #testDiv is hovered, set any sibling #hiddenDivs to font-weight: bold;
The + means sibling. It works in your second example because #hiddenDiv2 is a sibling of #testDiv2.
When the target items are nested the CSS selector changes to a child selector. This:
#testDiv:hover #hiddenDiv {
display:block;
}
is saying:
any time #testDiv is hovered, set all child #hiddenDivs to display: block;
I have looked at several other questions but I can't seem to figure any of them out, so here is my problem: I would like to have a div or a span, when you hover over it an area would appear and would be like a drop down.
Such as I have an div, and I want to hover over it and have it show some info about the item I hovered over
<html>
<head>
<title>Question1</title>
<styles type="css/text">
#cheetah {
background-color: red;
color: yellow;
text-align: center;
}
a {
color: blue;
}
#hidden {
background-color: black;
}
a:hover > #hidden {
background-color: orange;
color: orange;
}
</styles>
</head>
<body>
<div id="cheetah">
<p>Cheetah</p>
</div>
<div id="hidden">
<p>A cheetah is a land mammal that can run up 2 60mph!!!</p>
</div>
</body>
</html>
But this ^ doesn't seem to work, I don't know why... and if there is a way to do that in CSS, I would like to know, but I want any and all suggestions.
You can achieve this in CSS only if the hidden div is a child of the element you use for hovering:
http://jsfiddle.net/LgKkU/
You cannot affect a non-child element using :hover from within CSS2, which is supported by all common browsers.
You can affect a sibling element using CSS2.1 selectors, like so:
a:hover + .sibling { ... }
However, this only works for direct siblings. This means you could have HTML like this:
<p>Cheetah <span class="sibling">Blah Blah Blah</span></p>
Notice that the a and the span are direct siblings.
Here's a fiddle showing the siblings working: http://jsfiddle.net/vUUxp/
However, not all browsers support the CSS2.1 sibling selectors, so you need to decide based on your target audience if you can use this or not.
Edit: Corrected my mistake on the CSS version for the + selector: it's 2.1 that defines it, not CSS3. I also added a link showing browser support. Otherwise, the answer is the same.
Or, if you're open to it, use jQuery.
Something like this would work:
$("#element") // select your element (supports CSS selectors)
.hover(function(){ // trigger the mouseover event
$("#otherElement") // select the element to show (can be anywhere)
.show(); // show the element
}, function(){ // trigger the mouseout event
$("#otherElement") // select the same element
.hide(); // hide it
});
And remember to wrap this in a DOM ready function ($(function(){...}); or $(document).ready(function(){...});).
You can absolutely do this in CSS3 now using the ~ adjacent sibling selector.
triggerSelector:hover ~ targetSelector {
display: block;
}
For example, if you want a tooltip to appear when hovering over an adjacent button:
.button:hover ~ .tooltip {
display: block;
}