This question already has answers here:
What does the "+" (plus sign) CSS selector mean?
(9 answers)
How to affect other elements when one element is hovered
(9 answers)
Closed 1 year ago.
I tried implementing :hover specifically on a link that's inside a paragraph.
the p.hop is hidden but when I hover over the link, nothing happens.
.hop {
display: none;
}
a.hop2:hover + .hop {
display: block;
}
<p>A playlist for happy coding.</p>
<p class="hop">Keep your code close but your playlist closer.</p>`
The + sign selector is used to select the elements that are placed immediately after the specified element but not inside the particular elements.
.hop is not next to the link so that is not working, You can use span next to a tag and get the same result.
.hop {
display: none;
}
a.hop2:hover + .hop {
display: block;
}
<p>A playlist for happy coding.
<span class="hop">Keep your code close but your playlist closer.</span></p>
Related
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 1 year ago.
I want to create a button like README.md (GitHub), when hover on # headline it will show a button link to the that id, image.
I tried with html:
<div id="headline"># HEADLINE</div>
css:
a.to {
display: none;
}
#headline:hover + a.to {
display: block;
}
but it's not work
This is how it's done. You were close, but the + combinator only works with adjacent elements. Since the a tag is a descendant of the div, there would be no need for a combinator.
.to{
visibility: hidden;
}
#headline:hover .to{
visibility: visible;
}
<div id="headline"># HEADLINE</div>
One more thing, to scroll within the DOM, the href attribute would have a # followed by the id of the target element. So to scroll to the div of id "headline", the href attribute's value would be #headline.
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
This question already has answers here:
What does the "+" (plus sign) CSS selector mean?
(9 answers)
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
How to affect other elements when one element is hovered
(9 answers)
Closed 3 years ago.
<style>
div{
width: 300px;
height: 300px;
background-color: blue;
display: none;
}
.hei:hover+div{
display: block;
}
</style>
<p class="hei">slm</p>
<br>
<p class="hei">hei</p>
<div class=""></div>
i gave them the same class, but only of the p elements is working. I checked w3 schools, yet could not find anything.
It is because that + selector is only targeting next element, when ~ is targeting all next div's in your case. So your CSS will be like something similar to this :.hei:hover~div.
Here you can find more information about this behavior.
Difference between the selectors div + p (plus) and div ~ p (tilde)
ul ~ p {
color: red;
}
This sibling combinator is similar to X + Y, however, it's less
strict. While an adjacent selector (ul + p) will only select the first
element that is immediately preceded by the former selector, this one
is more generalized. It will select, referring to our example above,
any p elements, as long as they follow a ul.
The second tip: don't use https://www.w3schools.com/ for learning, it has poor examples and did not really cover all the informations.
Instead go for https://developer.mozilla.org/en-US/
The plus sign + in a css selector means for
p + div
Selects all <div> elements that are placed immediately after <p> elements
Try it with ~
Selects every element that is a next sibling
div{
width: 300px;
height: 300px;
background-color: blue;
display: none;
}
.hei:hover~div{
display: block;
}
<p class="hei">slm</p>
<br>
<p class="hei">hei</p>
<div class=""></div>
This question already has answers here:
How to change the style of the title attribute inside an anchor tag?
(10 answers)
Closed 6 years ago.
I'm trying to change the pop-up of an element using CSS, yet it doesn't work.
name {
background-color: #00BBFF;
color: white;
}
<button title="name">Test</button>
Looks like you want to use the attribute selector https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
button[title="name"] {
background-color: #00BBFF;
color: white;
}
<button title="name">Test</button>
Unfortunately, the tooltip style cannot be changed in any browser.
I'd suggest you implementing your own with CSS (add a hidden span or some other element with the tooltip and show it on button:hover) or JS (nicer as you could set a delay before is shown).
This question already has answers here:
Is there a CSS selector for elements containing certain text?
(20 answers)
Closed 8 years ago.
I'm trying to find some text inside an element using a css selector, but not include the children of the element. For example:
<div id="information">
This is the text I need
<div>I don't want this text</div>
<span>I also don't want this</span>
</div>
Any ideas?
NOTE: I'm parsing a page so I don't have control over the elements
Apparently not possible using CSS Selectors. With XPath though, if someone is interested:
//div[#id='information']/text()
So you want the loose text inside of #information but you don't want the div and the span? Seems quite simple:
#information {
/* property values */
}
#information > div {
display: none; /* removes content of child div */
}
#information > span {
display: none; /* removes content of child span */
}
I guess you don't really even have to use the child (>) selector, too.
There is no CSS selector to select just the text content of an element. There is nothing illogical about the idea (CSS could have a pseudo-element for the purpose), but currently there is no specification or even draft on such matters.
What you can do is to set styles on an element and then override them on any child element, possibly using a selector like #information * that matches all descendant elements or #information > * that matches all child elements.