I show a tooltip when an input gains focus. This tooltip is a span: hidden, but shown (via CSS) when input has focus.
input + .k-comments {
display: none;
max-width: 25em;
color: #FFF;
background: #283135;
padding: 0.3rem;
margin-top: 0.3rem;
animation: appearance 2s forwards;
}
input:focus + .k-comments {
display: block;
}
<input id="myid" type="text"/>
<span class="k-comments">foo a link</span>
If I click on the tooltip (or everywhere else), it disappears: ok.
The problem: my tooltip contains text and a link -> I can't click on the link because the tooltip disappears first.
Probably not the best solution but at least it makes the link clickable:
input:focus + .k-comments,
.k-comments:active {
display: block;
}
input + .k-comments {
visibility: hidden;
opacity: 0;
max-width: 25em;
color: #FFF;
background: #283135;
padding: 0.3rem;
margin-top: 0.3rem;
transition: all 2s linear;
}
input:focus + .k-comments {
visibility: visible;
opacity: 1;
transition: none;
}
My solution :add a hidden transition to the comment.
Related
I wanted to add a effect where an icon showed up and disappeared smoothly when the button is hovered. The effect occurs with no issues when the button is hovered, but unlike other effects, it only works one way.
Note: I used Ionicons but the issue persists with several other icon libraries.
button {
font-size: 20px;
transition: 0.2s;
overflow: hidden;
}
.buttonicon {
position: relative;
font-size: 25px;
margin-bottom: -6px;
left: 100%;
width: 0;
}
button:hover .buttonicon {
transition: 1s;
left: 0;
width: 20px;
}
<script src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<button>
Button Text
<ion-icon class="buttonicon" name="chevron-forward-outline"></ion-icon>
</button>
It's quite Simple Rather than adding Transition Property on button:hover .buttonicon class apply transition on buttonicon your final output will be look like this.
.buttonicon {
position: relative;
font-size: 25px;
margin-bottom: -6px;
left: 100%;
width: 0;
transition: 1s;
}
button:hover .buttonicon {
left: 0;
width: 20px;
}
Change your css, you can add
transition: 1s
to .buttonicon instead of :hover selector. In this way the transition property will be applied to all transitions regarding the button, so you'll have the "smooth" effect.
If mouse on text as hover flickering text.
div {
position: absolute;
font-size: 40px;
color: black
}
.new {
opacity: 0;
visibility:hidden;
}
.old:hover {
opacity: 0;
visibility:hidden;
}
.new:hover {
opacity: 1;
visibility: visible;
}
<div class="old">Old</div>
<div class="new">New</div>
How i can show text New if mouse hover (without wrapper please)?
Code on JSFiddle
You can simply use content along with :after to replace text
div {
position: block;
font-size: 40px;
color: black
}
.old:after{
content:'old';
}
.old:hover:after{
content:'new';
}
<div class="old"></div>
Edited
I think you have been asking that old must disappear on hover and new must stay forever even after hover effects.
This can be done by transition effects. This time I go for Allan Jebaraj's answer using z-index and altering the opacity transition effects.
div {
position: absolute;
font-size: 40px;
color: black
}
.new {
opacity: 0;
transition: opacity 9999s;
}
.old {
z-index: 1;
transition: opacity 9999s;
}
.old:hover {
opacity: 0;
transition: opacity 0s;
}
.old:hover+.new {
opacity: 1;
transition: opacity 0s;
}
<div class="old">old</div>
<div class="new">new</div>
I think this is what you are asking. Set the transition time as large as possible to make sure they don't revert back to normal as user stays.
You can try this
div {
font-size: 40px;
color: black
}
.new {
display: none;
}
.old:hover + .new {
display: block;
}
You have to set the z-index of the class .old and use the adjacent sibling selector to hide the old class and display the .new class.
Refer the JSFiddle below.
JSFiddle link
div {
position: absolute;
font-size: 40px;
color: black
}
.new {
opacity: 0;
}
.old {
z-index: 1;
}
.old:hover {
opacity: 0;
}
.old:hover+.new {
opacity: 1;
}
<div class="old">Old</div>
<div class="new">New</div>
I have a very simple menu that I am trying to get working - however, while I have the basic animation going, the child content inside the animated div is NOT hidden. This is pure CSS3, and I am trying to avoid jQuery IF it can be done at all. It uses the checkbox hack to act as a fake button to trigger the menu.
In this state, the menu is hidden but the content text is still clearly showing.
The text should be hidden along with the div that it's contained in.
HTML:
<body>
<input type="checkbox" value="selected" id="exCheckBoxID" class="exTooltip-input">
<label for="exCheckBoxID" class="exTooltip-Label exTooltipTopLeft"></label>
<div id="exMC" class="exMC-TopLeftPosition">
Test
</div>
CSS:
.exTooltip-Label {
background-color: #000;
width: 32px;
height: 32px;
cursor: pointer;
display: inline-block;
}
.exTooltip-input {
display: none;
}
.exTooltip-input:not(checked) ~ #exMC {
height: 0px;
}
.exTooltip-input:checked ~ #exMC {
height: 97%;
}
#exMC {
position: fixed;
width: 160px;
background-color: #565656;
-webkit-transition : all 0.30s ease-out;
-moz-transition : all 0.30s ease-out;
-o-transition : all 0.30s ease-out;
transition : all 0.30s ease-out;
}
The menu is written inside a standard HTML5 template, with
for consistency, but it seems like the Chrome stylesheet may be overriding things anyway. However, this same issue shows up in Firefox and Opera as well.
What is it that I am missing, in order to hide the contents of the menu when the
animation is in it's "closed" state?
Instead of using the height you could use the display: block & display: none properties but that would remove the animation.
However you can use the visibility property to achieve what you want here.
Refer to attached code:
.exTooltip-Label {
background-color: #000;
width: 32px;
height: 32px;
cursor: pointer;
display: inline-block;
}
.exTooltip-input {
display: none;
}
.exTooltip-input ~ #exMC {
height: 0px;
visibility: hidden;
/* display: none; */
}
.exTooltip-input:checked ~ #exMC {
height: 97%;
visibility: visible;
/* display: block; */
}
#exMC {
position: fixed;
width: 160px;
background-color: #565656;
-webkit-transition: all 0.30s ease-out;
-moz-transition: all 0.30s ease-out;
-o-transition: all 0.30s ease-out;
transition: all 0.30s ease-out;
}
<input type="checkbox" value="selected" id="exCheckBoxID" class="exTooltip-input">
<label for="exCheckBoxID" class="exTooltip-Label exTooltipTopLeft"></label>
<div id="exMC" class="exMC-TopLeftPosition">
Test
</div>
I'm working on a CSS hide/show effect. It works fine on Firefox. You click on it, the Hello World text appears. Then you click again, and it disappears.
But on Chrome/Safari, you have to click and hold the button to make it appear.
How can I make it work properly on Chrome/Safari like it does on Firefox?
Here is jsfiddle.
HTML:
<div class="formatting_show" id="formatting_show"></div>
<span id="formatting_content"> Hello World </span>
CSS:
#formatting_show {
cursor: pointer;
cursor: hand;
float: right;
font-size: 30px;
height: 15px;
text-align: right;
width: 74px;
color: #000;
}
#formatting_content {
display: block;
-webkit-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
font-size: 0;
overflow: hidden;
}
#formatting_show:before {
content: "Formatting «"
}
#formatting_show:active.formatting_show:before {
content: "Formatting »"
}
#formatting_show:active ~ span#formatting_content {
font-size: 30px;
height: 70px;
opacity: 1;
}
#formatting_content {
float: left;
}
I agree with #Huangism who wrote in a comment, that this isn't possible with the :active pseudo class. However, you could use a HTML checkbox, a label for that checkbox and the general sibling selector in CSS (see also).
This is all the HTML code:
<input id="formatting_show" type="checkbox" />
<label for="formatting_show">Formatting</label>
<div class="formatting_content">Hello World</div>
And the complete CSS code:
#formatting_show {
display: none;
}
.formatting_content {
display: none;
}
#formatting_show:checked ~ .formatting_content {
display: block;
}
You can take a look at a running example.
I am experimenting with using CSS to display genereated content in pseudo-elements.
The hover state does not work correctly. The content generated from the last button appears before the mouse actually hovers over the button if the mouse enters from the bottom. Is there a way to fix this so that the content only appears when the button is hovered over?
Here is a fiddle for the example: http://jsfiddle.net/Ts6qy/
Here is my HTML:
<div class="container">
<span data-title="Number 1">Item 1</span>
<span data-title="Number 2">Item 2</span>
<span data-title="Number 3">Item 3</span>
<span data-title="Number 4">Item 4</span>
</div>
Here is my CSS:
.container {
position: relative;
text-align: center;
padding: 20px 0;
max-width: 420px;
margin: 0 auto;
}
.container span {
display: inline-block;
padding: 2px 6px;
background-color:#78CCD2;
color:#FFFFFF;
border-radius:4px;
margin:3px;
cursor:default;
}
/* Pseudo-elements can even access attributes in their parent elements */
.container span::before {
position:absolute;
bottom: 0;
left: 0;
width: 100%;
content: attr(data-title);
color: #666666;
font-weight:bold;
text-align: left;
opacity: 0;
/*Animate the transistions */
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.container span:hover::before {
opacity: 1;
}
Another approach, to make clearer what is happening:
Add pointer-events: none to the pseudo element:
.container span::before {
position:absolute;
bottom: 0;
left: 0;
width: 100%;
content: attr(data-title);
color: #666666;
font-weight:bold;
text-align: left;
opacity: 0;
/*Animate the transistions */
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
pointer-events: none;
}
And it solves the problem (of course in supporting browsers).
What was happening is that the hover was triggered by the span and also by the pseudo element of the span.
Take a look http://jsfiddle.net/Ts6qy/26/
This width: 100%; has been removed from .container span::before.
So, this way, the before just shows up when hovered it self or when on of those spans is hovered.
I don't know if you really do need what width: 100%; anyway, this method works and you can keep transitions.