I have a document with notes that should display when the user hovers over the [note] indicator without disrupting the rest of the text. Here is my CSS:
.nb {
color: blue
}
.nb sup {
color: blue
}
.nb:hover sup {
cursor: alias
}
.nb:hover span.ft {
display: inline;
position: relative;
bottom: -30px;
padding: 2px;
background-color: white;
border: 2px solid black;
}
.ft {
display: none
}
<span class='sentence'>This is a lovely sentence about nothing at all<span class='nb'><sup>[a]</sup><span class='ft'>or is there more to the story?</span></span>and I like to ramble on and on, and on.</span>
<span class='sentence'>This is another nice sentence, but this one has no notes--how boring.</span>
I would like for my drop-down text to not disrupt the rest of the line it's on (or the lines below it), but I have not been successful.
.nb {
color: blue
}
.nb sup {
color: blue
}
.nb:hover sup {
cursor: alias
}
.nb:hover span.ft {
display: inline;
position: absolute;
padding: 2px;
background-color: white;
border: 2px solid black;
}
.ft {
display: none
}
<span class='sentence'>This is a lovely sentence about nothing at all<span class='nb'><sup>[a]</sup><span class='ft'>or is there more to the story?</span></span>and I like to ramble on and on, and on.</span>
<span class='sentence'>This is another nice sentence, but this one has no notes--how boring.</span>
.nb {
color: blue
}
.nb sup {
color: blue
}
.nb:hover sup {
cursor: alias
}
.nb:hover span.ft {
display : inline-block;
position : absolute;
color : black;
border : solid 1px black;
padding : 4px;
background-color : white;
}
.ft {
display: none
}
<span class='sentence'>This is a lovely sentence about nothing at all<span class='nb'><sup>[a]</sup><span class='ft'>or is there more to the story?</span></span>and I like to ramble on and on, and on.</span>
<span class='sentence'>This is another nice sentence, but this one has no notes--how boring.</span>
Use absolute CSS positioning as it will let the box behave without the others elements constraints.
.nb {
color: blue; position: relative;
}
.nb sup {
color: blue
}
.nb:hover sup {
cursor: alias
}
.nb:hover span.ft {
display: inline;
position:absolute;
bottom: -30px;
padding: 2px;
background-color: white;
border: 2px solid black;
}
.ft {
display: none; width:190px;
}
<span class='sentence'>This is a lovely sentence about nothing at all<span class='nb'><sup>[a]</sup><span class='ft'>or is there more to the story?</span></span>and I like to ramble on and on, and on.</span>
<span class='sentence'>This is another nice sentence, but this one has no notes--how boring.</span>
Related
I have an image and i want to make a square inside it, however it draws a rectangle.
p::after {
content: "";
background-color: red;
padding: 5px;
/*line-height: 0px;*/
}
<p>That is not a square -></p>
display:inline-block will solve the problem
p::after {
content: "";
display:inline-block;
background-color: red;
padding: 5px;
/*line-height: 0px;*/
}
<p>That is a square -></p>
Is there a simple way to reverse the colour order when hovering?
Using this trick here I have the order right > left:
&:hover,
&:hover ~ button {
color: red
}
The fiddle with the right > left: https://jsfiddle.net/celio/Lowc1ruh/
Example with the left > right: https://css-tricks.com/examples/StarRating/
It is impossible for me to use float, position: absolute; and anything that changes the right order of my current html.
Plain CSS example:
button {
margin: 0;
padding: 5px;
border: none;
background: transparent;
display: inline-block;
}
button:before {
content: "⋆";
font-size: 5rem;
line-height: 1;
}
button:hover,
button:hover ~ button {
color: red;
}
<div class="wrapper">
<button></button>
<button id="2"></button>
<button></button>
<button></button>
<button></button>
</div>
One way would be to make all the child button elements color: red; when hovering over .wrapper. Then use the sibling selector (~) to change any elements after the currently hovered element to color: black;.
You should remove any whitespace between the elements (in this case I put them into one line in the HTML) to ensure that the cursor is always hovering over a star.
Example with plain CSS:
.wrapper button {
margin: 0;
padding: 5px;
border: none;
background: transparent;
display: inline-block;
}
.wrapper button:before {
content: "⋆";
font-size: 5rem;
line-height: 1;
}
.wrapper button:hover ~ button {
color: black;
}
.wrapper:hover button {
color: red;
}
<div class="wrapper">
<button></button><button id="2"></button><button></button><button></button><button></button>
</div>
JS Fiddle using SASS
I have a date input that I've styled but I can't remove a blue highlight.
Here is a pen:
http://codepen.io/pjrundle/pen/PqjKBZ
<input id="selectedDate" type="date" class="date-filter pseudo-input live-update" placeholder="Event Date">
::-webkit-inner-spin-button {
display: none;
}
::-webkit-clear-button {
display: none;
-webkit-appearance: none;
}
::-webkit-calendar-picker-indicator {
opacity: 0;
height: 14px;
width: 80px;
border: 1px solid green;
z-index: 2;
position: absolute;
left: 9px;
top: 8px;
}
so when you click on the input, the first element should not go blue. Does anyone know how to do this?
The first element goes blue to indicate that it is the active element (in case you want to update the date using the keyboard), you can style it by specifying that it should not have a background using the pseudo-elements:
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
Notice: you should style not only the month, but all three elements (day/month/year) as you don't know which date format the user's computer will have. The code would be like this:
::-webkit-datetime-edit-month-field { background: none; }
::-webkit-datetime-edit-day-field { background: none; }
::-webkit-datetime-edit-year-field { background: none; }
And your example would look like this:
::-webkit-datetime-edit-month-field { background: none; }
::-webkit-datetime-edit-day-field { background: none; }
::-webkit-datetime-edit-year-field { background: none; }
::-webkit-inner-spin-button {
display: none;
}
::-webkit-clear-button {
display: none;
-webkit-appearance: none;
}
::-webkit-calendar-picker-indicator {
opacity: 0;
height: 14px;
width: 80px;
border: 1px solid green;
z-index: 2;
position: absolute;
left: 9px;
top: 8px;
}
<input id="selectedDate" type="date" class="date-filter pseudo-input live-update" placeholder="Event Date">
Check this question for a list of all the pseudo-elements that you can use.
I've got some Sass I've inherited that looks like below. I want to be able to specify a CSS tag to differentiate between green and another color (see anchor tag and comment).
Now, I have-
<div class="names"></div>
The link shows green. I want to be able do something like-
<div class="names myblue"></div>
And instead have it be a different color.
&.SpeakerCount3 {
.names {
text-align: center;
li {
text-align: center;
display: inline-block;
width: 82px;
margin-left: 5px;
&:first-child {
margin-left: 0;
}
}
img {
max-width: 100%;
}
h3 {
margin-top: 0;
a {
font-size: 10px;
}
}
}
}
.names {
min-height: 180px;
.photo {
margin-top: -21px;
}
img {
display: block;
border: 3px solid #282828;
margin: 0 auto;
}
h3 {
margin-top: 5px;
}
a {
font-size: 20px;
color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
text-decoration: none;
}
}
.description {
margin-bottom: 15px;
min-height: 120px;
h3 {
margin: 5px 0 20px 0;
min-height: 40px;
}
}
Having seen the HTML code that was being hidden in your question, I should say that good class names generally should relate to state rather than properties - so the class name "myblue" should probably be replaced with something like "featured", "highlighted" etc. This is especially the case where you are asking for "myblue" to actually change the colour to Orange - something that may well confuse future maintainers. In the case that "myblue" is a company or feature name it may well be legitimate, but I would consider carefully if there is an alternative class name which does not include a colour name.
In Sass you could do something like-
a {
font-size: 20px;
color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
text-decoration: none;
.myblue & {
color: orange;
}
}
As the "a" selector is contained within the ".names" selector though, this will result in a rendered rule of-
.myblue .names a {
color: orange;
}
As "names" is not a descendant of "myblue" in your DOM, the selector will not match - and this isn't what you want.
If you only want the rule to apply where both "names" and "myblue" are present I would write this-
.names {
min-height: 180px;
.photo {
margin-top: -21px;
}
img {
display: block;
border: 3px solid #282828;
margin: 0 auto;
}
h3 {
margin-top: 5px;
}
a {
font-size: 20px;
color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
text-decoration: none;
}
&.myblue {
a {
color: orange;
}
}
}
The ampersand produces a combined selector, rather than the descendant selector you would get with a space (this is Sass only - not valid CSS).
Alternatively, if you want the "myblue" class selector to apply even without the "names" class, then simply do this-
.names {
min-height: 180px;
.photo {
margin-top: -21px;
}
img {
display: block;
border: 3px solid #282828;
margin: 0 auto;
}
h3 {
margin-top: 5px;
}
a {
font-size: 20px;
color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
text-decoration: none;
}
}
.myblue {
a {
color: orange;
}
}
As the "myblue" selector appears after the "names" selector, the color property for the link will override the color set in "names" - leaving all other properties for the link and other elements intact. This solution simply utilises the CSS cascade to achieve the desired effect.
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/