I am pretty new to css. I have defined a dot element with different collors.
/*Dots*/
.ccrdot {
display: inline-block;
position: absolute;
background-color: #8d8d8d;
border-radius: 50%;
opacity: 0.5;
width: 10px;
height: 10px;
pointer-events: none;
}
.ccrdot.red {
background-color: #FF0000;
}
.ccrdot.yellow {
background-color: #fffb09;
}
.ccrdot.green {
background-color: #67ff09;
}
But when i use this like:
> <span class="ccrdot"></span><span>Text Text Text</span>
<span class="ccrdot"></span> Text Text
or
<div class="ccrdot"></div> Text Text
The text slides under the dot element. I want to present them side by side. What did i do wrong?
Thank you.
position: absolute takes them out of the text flow, so there's no space reserved for them anymore, if you remove it they'll have their own space.
/*Dots*/
.ccrdot {
display: inline-block;
background-color: #8d8d8d;
border-radius: 50%;
opacity: 0.5;
width: 10px;
height: 10px;
pointer-events: none;
}
.ccrdot.red {
background-color: #FF0000;
}
.ccrdot.yellow {
background-color: #fffb09;
}
.ccrdot.green {
background-color: #67ff09;
}
Related
I'd like to have tooltip text completely specified by CSS, and not in the dynamic-html portion of my application, so that styling and code can be completely separable (I'm taking the view that tooltip messages may be the concern of the UX department, or at least, a 3rd party user, and shouldn't have to hack around in the JavaScript-generating code to effect tooltip changes).
The following code isn't expected to completley work, but it doesn't work at all:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:after {
content: "foo bar";
}
.tooltip:hover .tooltip:after {
visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
</div>
</body>
</html>
In particular, though I've defined the after content, it isn't being displayed on hover:
.tooltip:after {
content: "foo bar";
}
.tooltip:hover .tooltip:after {
visibility: visible;
}
For reference, this was modified from the w3schools example
Not sure if this old answer is still applicable since it may predate pseudo elements: Tooltips, CSS only, Show text tooltip on mouseover using a class to define the text
there you go:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip:after {
content: "foo bar";
position: absolute;
top: -30px;
right: 0;
left: 0;
display: none;
text-align: center;
background-color: #000;
color: #fff;
border-radius: 4px;
padding: 2px;
}
.tooltip:hover:after {
display: block;
}
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me</div>
if you want to change the position / look of the tooltip itself, change the styling of this part: .tooltip:after {}
I believe your problem is this selector:
.tooltip:hover .tooltip:after
This CSS selector applies to an element with the class of 'tooltip' that is within a parent element that also has the class of 'tooltip'. You probably want:
.tooltip:hover::after
(Note that this won't work exactly with your example code because it applies style to .tooltip .tooltiptext, which also doesn't exist. You probably mean .tooltip::after here also.)
Here is a working version of the example in your question.
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip:after {
opacity: 0;
}
.tooltip:hover:after {
content: "foo bar";
opacity: 1;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 0 6px 6px 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
margin: 0.5rem 0 0 0.5rem;
z-index: 1;
}
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me</div>
I am trying to style the parent div when hover over a div but it doesn't seem to work.
Here is my work
.icon-grid:hover ~ .ab_section_element {
border: 2px solid black;
background-color: white;
}
<div data-v-714a5b85="" class="ab_section_element">
<span data-v-714a5b85="" class="icon icon-grid clickable">
Section (Left Text)
</span>
</div>
Is there anything I'm doing wrong?
You can't select the parent element, but you can "fake" the selection of the parent element with an absolutely positioned pseudo-element:
.ab_section_element {
position: relative;
}
.icon-grid:hover::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid black;
background-color: white;
z-index: -1;
}
/* just for demonstration */
body {
background: #ccc;
}
<div data-v-714a5b85="" class="ab_section_element">
<span data-v-714a5b85="" class="icon icon-grid clickable">
Section (Left Text)
</span>
</div>
However, this approach requires that the child element itself shouldn't be positioned (non-statically).
You cannot style a parent with hover, but you can do an adjacent.
.div1 {
width: 60px;
height: 60px;
background: red;
}
.div2 {
width: 60px;
height: 60px;
background: green;
}
.div1:hover~.div2 {
background: yellow;
}
<div class='div1'></div>
<div class='div2'></div>
This may solve your problem.
.ab_section_element .icon-grid:hover{
border: 2px solid black;
background-color: white;
}
I have this code: https://codepen.io/anon/pen/QdQEQW
As you can see, if you hover over "Dropdown" it also changes the background color of "V", the :after part. I do not want that. Simple. But I just can't get it done. I've googled and tried and tried but I just cant figure out how.
I've tried a bunch of different, variations, eg
.onclick-menu:hover.onclick-menu:after {
background: blue;
}
.onclick-menu:after:hover {
background: blue;
}
.onclick-menu:hover > onclick-menu:after:hover {
background: blue;
}
.onclick-menu:hover + onclick-menu:hover:after {
background: blue;
}
It seems to me that you want the following:
#top {
background: black;
line-height: 39px;
}
#top nav a {
color: #21262F;
padding: 10px 15px;
background: green;
}
#top nav a:hover {
background: red;
}
.onclick-menu {
position: relative;
display: inline-block;
}
.onclick-menu:after {
content: "V";
background: green;
margin-left: -4px;
padding: 8px 10px;
}
.onclick-menu:hover:after {
background: green;
}
.onclick-menu:focus {
outline: none;
pointer-events: none;
}
.onclick-menu:focus .onclick-menu-content {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.onclick-menu-content {
position: absolute;
z-index: 1;
background: #F4F4F4;
opacity: 0;
visibility: hidden;
transition: visibility 0.5s;
}
<div id="top">
<nav>
Hey
<div tabindex="0" class="onclick-menu">
Dropdown
<ul class="onclick-menu-content">
<li>Look, mom</li>
<li>no JavaScript!/li>
<li>Pretty nice, right?</li>
</ul>
</div>
Support
</nav>
</div>
For clarity's sake, this is the one:
.onclick-menu:hover:after {
background: green;
}
I don't understand why you added .onclick-menu twice in that selector in the first place. It's the pseudo element of the same item, so you don't need to repeat the parent.
so, I have some html layout and I cannot change the html, ONLY the css. Now, I can achieve the colors I want and create that circle (see image), with border-radius. Here is the rub, each square is a span. There are no inner divs/outer divs.. just the span. Is there a way to achieve, with css, that circle and then the half background fill.
the code would be, on a base level:
<span class="day is-range is-selected" />22</span>
<span class="day is-range" />23</span>
Basically, when a user selects a date, I color it that bright reddish color, make it a circle, make the other dates backgrounds that more bourbon red color.. great... BUT the selected date with the cirle doesn't have that "bleed into" the other square look with half its span colored. Is there a way to achieve this with css and no mods to the html?
I've only been able to achieve the following:
What I want to achieve.
This is really what I am trying to achieve. The span, goes to a circle, I can do that - but somehow make half of the span have a different background color.
The CSS I am using is fairly trivial. Note, I have to use !important to override what is gen'ed.
.is-selected {
background-color: #selected-background !important;
color: #base;
border-radius: 20px;
}
.is-inRange {
background-color: #active-background !important;
color: #base;
}
A pseudo-element would seem the only option here as the HTML cannot be altered.
The specificity has be managed though:
.day {
float: left;
width: 40px;
height: 40px;
background: plum;
line-height: 40px;
text-align: center;
color: white;
}
.is-range {
background: plum;
}
.is-range.is-selected {
background-color: red;
border-radius: 50%;
position: relative;
}
.is-range.is-selected:after {
content: "";
position: absolute;
top: 0;
width: 50%;
height: 100%;
left: 50%;
background: plum;
z-index: -1;
}
<div>
<span class="day is-range is-selected">22</span>
<span class="day is-range">23</span>
<span class="day is-range">24</span>
<span class="day is-range">25</span>
</div>
.day {
float: left;
width: 3em;
height: 3em;
background: silver;
line-height: 3em;
text-align: center;
}
.is-selected {
background-color: red;
border-radius: 50%;
position: relative;
}
.is-selected:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 50%;
background: silver;
z-index: -1;
}
<span class="day is-range is-selected">22</span>
<span class="day is-range">23</span>
If both days are in one row:
.day {
float: left;
width: 3em;
height: 3em;
background: silver;
line-height: 3em;
text-align: center;
}
.is-selected {
background-color: red;
border-radius: 50%;
position: relative;
}
.is-selected + .day {
margin-left: -1.5em;
padding-left: 1.5em;
}
<span class="day is-range is-selected">22</span>
<span class="day is-range">23</span>
I have following mark up:
<div class="one">Content</div>
<div class="two"></div>
and following style sheets:
.one, .two {
height: 20px;
}
.one {
background-color: #f00;
}
.two {
background-color: #0f0;
margin-top: -10px;
}
Why is the text Content visible, but the red background is not? I would expect the text also to be only partly visible due to the given style sheets.
For your convenience, I also created a jsFiddle.
If you want that text of first div would be only partly visible, you need to use position and z-index.
.one, .two {
height: 20px;
}
.one {
background-color: #f00;
position: relative;
z-index: 1;
}
.two {
background-color: #0f0;
margin-top: -10px;
position: relative;
z-index: 2;
}
http://jsfiddle.net/v5LfZ/2/