I have a text which on hover displays another (otherwise hidden) text elsewhere, like this:
HTML
<div class="design">hover me<span>to show this</span></div>
CSS
.design {
position: absolute;
z-index: 2;
color: #404040;
}
.design:hover {
cursor: pointer;
}
.design span {
position: absolute;
display: none;
}
.design:hover span {
display: block;
top: 47px;
left: 45px;
font-family: Arial;
font-size: 13px;
color: #000;
}
How can apply transition effects to the text which is hidden or shown depending on the hover? Apparently transition conflicts with display:none and :block, but using visibility doesn't seem to work either.
edit: jsFiddle - http://jsfiddle.net/vwsgJ/
First method
I have managed to achieve what you wanted using opacity, according to (I think) MDN (Mozilla Developer Network) you can't transition display. I also rearranged your css slightly:
http://codepen.io/hwg/pen/xFDIl - Working Code.
CSS:
.design span {
position: absolute;
opacity:0;
transition: opacity 1s;
display: block;
top: 47px;
left: 45px;
font-family: Arial;
font-size: 13px;
color: #000;
width:0;
height:0;
margin-left:-1000px;
}
.design:hover span {
opacity:1;
/*transition: all 1s;*/
width:30px;
height:auto;
margin-left:0;
}
Note that codepen.io uses prefix-free, see http://caniuse.com/css-transitions for browser support, prefixes may have to be added.
Edit- to avoid the OP's problem below, add: width:0; height:0; to the un-hovered element, and a pixel width/height such as width:30px; height:auto; on hover. (See example) There is if you hover over precisely that area you see the hover effect, but in practice this would be very rare in my view, also this can be solved by the use of margin left if needed.
Note: this stops the transition on mouse out.
New Method
To avoid the problem mentioned above, the property pointer-events:none can be added to the span. This removes the need to have any negative margins, or custom widths or heights.
See http://codepen.io/hwg/pen/BojpK
However, this is not supported in IE-anything, see css 'pointer-events' property alternative for IE for maybe more help.
Otherwise I don't think the OP's aim can be completely met.
Related
I am looking to create this effect with css: https://i.stack.imgur.com/zpzVC.png
Since I don't know how this effect is called, I haven't been able to find a solution online and I can't make it work on my own unfortunately.
The effect repeats a few times on different titles with different sizes. The border should begin on the half of the first letter.
Who can help me?
I'd use the :after pseudo class on the span element to accomplish this.
body {
background: #3E9CE2;
color: white;
font-family: sans-serif;
} /* Just for looks */
h1 span {
position: relative;
display: inline-block;
}
h1 span:after {
position: relative;
display: block;
content: "";
background: #DE2F2D;
z-index: -5;
height: 22px;
top: -19px;
left: 7px;
}
<h1>This is our <span class="offset-background">showcase</span></h1>
The position and display attributes on the span itself make sure the :after element is properly positioned (directly underneath the span) and has the same width as the text.
The pseudo element has to define its height and a position offset, as well as a negative z-index to make sure it's drawn behind the text.
Here is an example of what you seem to be looking for. The solution I used is to offset a box around the text and negatively offset the text the same amount.
h1 span { position: relative; display: inline-block; }
.blue-sq{
background-color:blue;
display:inline-block;
}
.offset-red{
position:relative;
top:22px;
background-color:red;
height:18px;
}
.inner-text{
position:relative;
top:-22px;
left:-6px;
}
<div class="blue-sq">
<h1>View our
<span class="offset-red">
<span class="inner-text">showcase</span>
</span>
</h1>
</div>
I need to put an image to an input button but it doesn't work with my code.
This is the code, and it says "couldn't load the image", please help me:
.button-search {
background-image: url('images/lupa.png');
no-repeat scroll center #F1F1F1;
cursor: pointer;
display: inline-block;
float: right;
height: 27px;
overflow:hidden;
text-indent: -9999em;
width: 36px;
border: none;
margin-right: 48px;
}
You have two problems:
First, you have a semi-colon after the background-image selector, but before its parameters. no-repeat scroll center $F1F1F1 are parameters of the background selector (and should be seen as if on the same line, not that the line break matters). Which brings up the next point: wrong selector.
Second, the correct selector (for what you are doing) is background not background-image. The background selector is a "short-hand" selector, and allows you to set (1) background-image, (2) background-position, (3) background-color, (4) background-repeat, etc. But the background-image selector ONLY allows you to set the background image.
jsFiddle Demo
Here is the corrected code:
.button-search {
background: url('http://placekitten.com/g/50/50')no-repeat scroll center #F1F1F1;
cursor: pointer;
display: inline-block;
float: right;
height: 27px;
overflow:hidden;
text-indent: -9999em;
width: 36px;
border: none;
margin-right: 48px;
}
Also note that the text-indent selector (set to -9999em) will move the button text to the left, and (at -9999em) all the way off the screen -- and possibly into a neighbor's house, their kitchen perhaps. Probably you already know this...?
If you get that error, then you got the image URL wrong.
It appears that Chrome has been fixed and this is no longer a problem.
a:hover {
outline: 0;
}
a {
position: relative;
color: blue;
text-decoration: none;
transition: color 0.2s ease-in;
}
a:hover {
color: green;
}
a:after {
background: green;
content: '';
width: 100%;
height: 2px;
position: absolute;
top: 100%;
left: 0;
}
JSFiddle here.
Using this CSS, hovering over links causes them to flicker and then turn invisible. If you mouse back out, they remain invisible.
Not only that, but any links in the last line of the paragraph still work fine (see the fiddle; it's crazy).
Removing the color transition on the anchor or removing the :after pseudo-element fixes the problem, but obviously that's not going to cut it.
Most interestingly, when I remove outline: 0, everything works as expected. I've since removed the line from my project since I don't need it (I'm using normalize.css and it was in there).
Does anybody know what's going on here? outline:none doesn't suffer from the same problems.
I made some CSS div buttons on an example website which are used in a sidebar navigation menu. I was just wondering how one would go about making it so that text appears only when the mouse is hovered over the button.
If there was a way to include the text (ex: "Click Here!") in the CSS under the hover part for the div only, that would work, but I don't think you can do that. If I include it in the HTML, then it shows up regardless of hover or not.
The example website is here: http://www.arthiaravind.com/nursery/
Ideally, the buttons would be blank, and then when they're hovered over, they would extend and the link would appear.
Here is the code for the first button:
.button1 {
position: fixed;
margin-top: 100px;
margin-left: 730px;
width:70px;
height:50px;
text-align:right;
padding: 0px 50px 0px 0px;
background:#75AD38;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
Here is the code for when you hover:
.button1:hover{
width:200px;
}
Any suggestions for making my code more streamlined would also be appreciated, as I currently have this code copypasted for each of the five buttons, which I know is clunky but I don't know how to make them all the same type of button but then position them individually.
I also don't know why the buttons extend when you load the page. That isn't supposed to happen.
Thank you!
To make text in a CSS button appear only on hover, you can use the CSS content property (you will have to look up cross browser support for this), use JavaScript, or change the color of the text on hover as others have suggested. Here is a JS fiddle that addresses the first two solutions:
http://jsfiddle.net/ABHgN/1/
/*<div id="button1"></div>*/
#button1{
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: green;
}
#button1:hover:before{
content: "viaCSS ";
}
A possible solution is simply to set the font color to the background colour, and then change it on hover. This fiddle demonstrates it: http://jsfiddle.net/LXxG3/
In your css add a font color
.button1{
background:#75AD38;
color:#75AD38;
}
and a hover color
.button1 hover{
color:#fff;
}
As for streamlining your css, simply apply the style to the base tag, ie button, and then individual styles by class name. for example to set individual background colours for two buttons...
EDIT: changed button to .baseButton so it can be used as a base class for your button divs
/*style for all button tags */
.baseButton{
width:70px;
height:50px;
margin-top: 100px;
margin-left: 30px;
text-align:right;
padding: 0px 50px 0px 0px;
background:#75AD38;color:#75AD38;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
/*individual styles */
.button1{
background-color:#afa;
color:#afa;
}
.button2{
background-color:#faa;
color:#faa;
}
This would be used in the html as such:
<div class="baseButton button1">Your button</div>
An alternative is to use id's for individual buttons..
css
/*individual styles */
#button1{background-color:#afa;color:#afa;}
#button2{background-color:#faa;color:#faa;}
html
<div class="baseButton" id="button1">Your button</div>
You can change color of text on hover
and put it same on normal state by that it is not visible
.button1 {
position: fixed;
margin-top: 100px;
margin-left: 730px;
width:70px;
height:50px;
text-align:right;
padding: 0px 50px 0px 0px;
background:#75AD38;
color:#75AD38; // same color as background
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
.button1:hover {
color:#fff ||#000 //like any suitable color
}
but it is not the right way
you can also use text-indent
or I think content:"text"; on hover like we use in :before and :after also work but I am not sure.
Note:
It is not good in terms of usability too
as the users get irritated when they have to hover every button to see what the button does.
I'd personally recommend you don't do this, as it would affect used experience. People may find it annoying to hover over each and every button when searching for content.
However if you still want to go ahead here's a working fiddle
Basically style your text like this
.button1 p {
display:none;
}
and then make it visible on hover like this
.button1:hover p {
display:inline;
}
Here is a quick example of how the text will only show on hover using css child combinator
<div>
<p>text</p>
</div>
/** CSS **/
* {
margin: 0;
padding: 0;
}
div {
width: 60px;
height: 40px;
background-color: green;
border: 1px solid #000;
}
p {
text-align: center;
color: #fff;
vertical-align: middle;
display: none;
line-height: 40px;
}
div:hover > p {
display: block;
}
jsfiddle
Use the precious CSS code;
http://jsfiddle.net/hassaan39/NheFj/
I use the text visibility hidden, on hover visibility visible. Simply the best.
This CSS works in IE8 and newer (and in Chrome), but not in IE7. Specifically, the tooltip just doesn't appear when I hover over the div. What do I need to change for IE7 (and IE6)?
.headertooltip, .headertooltip:visited
{
color: #0077AA;
float: left;
height: 40px;
text-decoration: none;
width: 20px;
}
.headertooltip div
{
background-color: black;
color: #fff;
left: 50px;
padding: 5px 10px 5px 40px;
position: absolute;
text-decoration: none;
top: 82px;
visibility: hidden;
width: 900px;
z-index: 10;
}
.headertooltip:hover div
{
position: absolute;
visibility: visible;
}
UPDATE:
I've updated the code to use mouse events to show the div/tooltip, but that still isn't working in IE7. That makes me think the problem lies in my markup/CSS.
I tried to create a sample in jsFiddle. It doesn't work, but you get the idea. Hovering the mouse over the little black box on the left (which I added just so you can see the target) should make the tooltip appear.
http://jsfiddle.net/szyN4/
IE6 has minimal support for the :hover pseudo class, and IE7's is incomplete.
Try and change the .headertooltip:hover div to .headertooltip div:hover to please the oddities of IE's bubbling mechanism. It may solve your issue (you'll have to include it in a conditional stylesheet for IE7 only, of course).
You may also use JavaScript to sidestep this by implementing mouseenter and mouseleave. See a posted answer of mine on IE's innovation regarding mouse events for a quick reference.
References
CSS support table on quirksmode
mouseover and mouseout on quirksmode