i have an link, when I hover it, I want a span to appear using CSS only.
HTML is here:
Rules
<span class="tooltip">
some personal information rules some personal information rules some personal information rules some personal information rules some personal information rules
</span>
CSS is here:
.tooltip{ display: none;}
.tooltip-trigger {
background: url(../images/right-arro.png) right 13px no-repeat;
background-color: #EEEEEE;
display: block;
float: left;
height: 33px;
line-height: 33px;
padding: 0 15px 0 6px;
color: #2578E8;
}
.tooltip-trigger :hover > .tooltip{ display: block;}
fiddle is here: http://jsfiddle.net/LBE55/
Two problems:
Firstly, > is the child combinator selector, not a sibling selector. Your span element isn't a child of your a element; it's a sibling. You'll want to use the adjacent sibling combinator (+) instead.
Secondly, :hover needs to be directly after .tooltip-trigger (remove the space), otherwise you're calling the hover on an element contained within your a element (of which there are none):
.tooltip-trigger:hover + .tooltip { display: block; }
JSFiddle demo.
You have to include the span inside link tag
Rules<span class="tooltip">some personal information rules some personal information rules some personal information rules some personal information rules some personal information rules </span>
The way you wrote the css, span has to be inside of a to appear
Try this I found on a tutorial:
.tooltip {
display: inline;
position: relative;
}
.tooltip:hover:after {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
border-radius: 5px;
bottom: 26px;
color: #FFFFFF;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
width: 220px;
z-index: 98;
}
.tooltip:hover:before {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #333333 rgba(0, 0, 0, 0);
border-image: none;
border-style: solid;
border-width: 6px 6px 0;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
And the html:
<a class="tooltip" title="This is a tooltip" href="#"><span title="More">Tooltip Example</span></a>
// another way
.tooltip-trigger:hover ~ .tooltip { display: block; }
Related
I'm using Contact Form 7 on a website of a client, and I styled the dropdown menu to this:
.wpcf7-form select {
-webkit-appearance: textfield;
color: #72858a;
font-size: 0.7777777778rem;
background-color: #e9edf0;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
}
Unfortunately the arrows are missing now. Is there anyway to add an down arrow at the right side of the dropdown menu in the same color as the text? I tried different css classes found on this website, but nothing seems to work.
Image of how it displays now:
And how it should be:
The arrow could also be another arrow.
Any help would be appreciated much!
Regards,
Vasco
Here's an option for you... now... I used the span.wpcf7-form-control-wrap that was specifically around the select I was styling. You could also (instead) wrap the selects in a custom div.
This produced this result for me
I also made the triangle using clip-path, so you can change the colors or anything else.
/* Using the menu-813 which for me was the span around the select.*/
span.wpcf7-form-control-wrap.menu-813 {
position: relative;
height: 60px;
background: #e9edf0;
display: inline-block;
}
span.wpcf7-form-control-wrap.menu-813:after {
content: '';
position:absolute;
width: 15px;
height: 15px;
background: #000;
right:8px;
top: 20px;
z-index: 0;
clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.wpcf7-form select {
-webkit-appearance: none;
appearance: none;
color: #72858a;
font-size: 0.7777777778rem;
background-color: transparent;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
width: 300px;
z-index: 1;
position: relative;
padding-left: 2ch;
}
I am writing a mixin in Less that adds a play button to video tags. It looks like this:
.playVideoButton(#size: 64px) {
&:before {
content: "";
width: #size;
height: #size;
top: 50%;
left: 50%;
display: none;
position: absolute;
.transform(translate(-50%, -50%));
.border-radius(50%);
border: 2px solid #fff;
background-color: rgba(0, 0, 0, 0.35);
}
&:after {
width: 0;
height: 0;
content: "";
border-top: #size / 4 solid transparent;
border-bottom: #size / 4 solid transparent;
border-left: #size / 2.4 solid #fff;
top: 50%;
left: 50%;
display: none;
position: absolute;
.transform(translate(-35%, -50%));
}
&:hover {
&:before {
display: block;
&:hover {
background-color: rgba(0, 0, 0, 0.60);
}
}
&:after {
display: block;
}
}
}
It Works fine but I want to make a second hover effect for the :before. So I write at the end: &:hover > &:before > &:hover {background-color: rgba(0, 0, 0, 0.60);} but when I hover the :before element I don't get a change of the background opacity.
Chromes Dev Tool hides the hover settings for pseudo elements. So is it not possible to modify them without JavaScript?
At present you can't attach :hover (or any other pseudo-classes to a pseudo-element). It is implied by the below text in the W3C Spec for pseudo-elements:
Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.
and the following one from the W3C Spec for selector syntax:
One pseudo-element may be appended to the last sequence of simple selectors in a selector.
Pseudo-classes (like :hover, :link etc) are simple selectors and a pseudo-element can only be appended after all such simple selectors. So, it rules out the possibility of a div:hover:before:hover or div:before:hover.
In the below snippet, a very simple one, you can see how the div:after:hover selector never gets matched while the div:hover:after does.
div:after {
display: block;
content: 'World';
background: beige;
}
div:after:hover {
background: green;
}
div:hover:after {
border: 1px solid green;
}
div:hover {
border: 1px solid red;
}
<div>Hello!</div>
You should consider creating that play button using an actual child element (instead of a pseudo) and then attach the :hover selector to it.
I have tag me box to add the tag.
http://jsfiddle.net/hailwood/u8zj5/
I was trying to change it's looks using css.
I wanted to create tags and box to look like in this code:
http://jsfiddle.net/hAz5A/20/
I added the css in first but does not make change. Can any css guys help me out?
Just add the css from the second fiddle into the first fiddle
Note: if you want to remove the 'x' - delete tag (for some reason) then add display: none to your tagit-close class
FIDDLE
FIDDLE without delete button
ul.tagit.ui-widget li.tagit-choice {
display: block;
float: left;
position: relative;
line-height: inherit;
border-radius: 6px;
background-color: #EFEFEF;
border: 1px solid #DDD;
padding: 5px 15px 5px 5px;
margin-right: 10px;
color: #08c;
text-decoration: none;
}
ul.tagit.ui-widget li.tagit-choice a.tagit-close {
cursor: pointer;
position: absolute;
right: 5px;
top: 50%;
margin-top: -8px;
}
I'm trying to create a custom checkbox only using css and no images, but I am having a bit of trouble.
I followed a few tutorials online, but I seem to have hit a road block and help would be great.
My css looks like this
input[type='checkbox'] {
-webkit-appearance: none;
background: #dee1e2;
width: 1.3em;
height: 1.3em;
border-radius: 3px;
border: 1px solid #555;
position: relative;
bottom: .3em;
}
input[type='checkbox']:checked {
-webkit-appearance: none;
background: #dee1e2;
width: 1.3em;
height: 1.3em;
border-radius: 5px;
position: relative;
bottom: .3em;
-webkit-transform: rotate(45deg);
}
What keeps happening is when I do the rotate the whole box rotates and I have tried adding a :after to it, but it didn't seem to do anything.
You could use a unicode check, or even an icon font if you want to get really fancy...
input[type='checkbox'] {
-webkit-appearance: none;
background: #dee1e2;
width: 1.3em;
height: 1.3em;
border-radius: 3px;
border: 1px solid #555;
position: relative;
bottom: .3em;
}
/* added content with a unicode check */
input[type='checkbox']:checked:before {
content: "\2713";
left: 0.2em;
position: relative;
}
Demo
As a matter of fact I tried the same thing on my website (http://e-home.mx) but I ended up hiding the input element with css and adding a label to each one which is the one that "emulates" its behavior like this:
HTML
<input type="checkbox" id="c8" name="c8" />
<label for="c8"><span></span>Label here</label>
CSS:
input[type="checkbox"] + label{color:#000;font-family:Arial, sans-serif;}
input[type="checkbox"] + label span{
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url("http://e-home.mx/html5/img/form_elements_outlined.png") left top no-repeat;
cursor:pointer;
}
input[type="checkbox"] {display:none}
input[type="checkbox"]:checked + label span {
background:url("http://e-home.mx/html5/img/form_elements_outlined.png") -19px top no-repeat;
}
Here is the fiddle:
http://jsfiddle.net/xedret/bTAGU/
I have some CSS questions.
I have a li element with a certain width. I also want a :after
element for this li and use this as a tooltip. Is it possible to
give the tooltip an auto width and center it above the li?
If I have the tooltip in the li:after element working I still need a
little triangle arrow for it therefor I would need to apply a :after
element on a :after element. Is this possible?
If the order is triangle, followed by tooltip text, you can achieve this by using :before and :after (as suggested in the comment). The below example, also available on dabblet, should give you an idea.
http://dabblet.com/gist/4280779
HTML:
<ul>
<li>first - no tooltip</li>
<li data-tooltip="Tooltip second">Second</li>
<li data-tooltip="Tooltip third">third</li>
</li>
CSS:
li {
color: #900;
}
li:hover {
color: red;
position: relative;
}
li[data-tooltip]:hover:after {
content: attr(data-tooltip);
padding: 4px 6px 4px 20px;
color: yellow;
position: absolute;
left: 0;
top: -150%;
white-space: nowrap;
z-index: 20;
border-radius: 5px;
box-shadow: 0px 0px 2px #333;
background-color: black;
}
li[data-tooltip]:hover:before {
content: "\0394";
padding-left: 3px;
position: absolute;
left: 0px;
top: -150%;
color: yellow;
z-index: 21;
}
You can make the tooltip look nice by replacing background-color with background-image / gradient, etc.