In CSS, is it possible that when I rollover one element, I make another element visible? I have an icon, and when someone mouses over it, I want it to make visible a text element that describes what the icon does.
Here's a CSS only tooltip I use all the time :) Works great, even in IE.
a:hover {
background:#ffffff;
text-decoration:none;
}
/*BG color is a must for IE6*/
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}
Easy
<a class="tooltip" href="#">
Tooltip
<span>T his is the crazy little Easy Tooltip Text.
</span>
</a>
Hope it helps.
You can make child-elements visible by hovering on the parent (as Hunter suggests), or siblings:
span:hover + span {display: block; }
There are maybe some slight cross-browser compatibility issues, but with a valid doctype I think IE7+ is okay with sibling selectors (though I've not tried to test that theory).
sure it is!
.me:hover span { display: block; }
If you want to show an element that isn't a child of the element hovered you might need to use javascript
Here's a little slapped-together example that won't work on IE...
<html>
<head>
<style>
div.tooltip
{
margin-top: 16px;
margin-left: -1px;
position: absolute;
border: 1px solid black;
background-color: blue;
color: yellow;
display: none;
}
div.icon
{
width: 16px;
height: 16px;
border: 1px solid blue;
background-color: cyan;
}
div.icon:hover .tooltip
{
display: block;
}
</style>
</head>
<body>
<div class="icon">
<div class="tooltip">This is what the icon does.</div>
</div>
</body>
</html>
But you really should just use jQuery.
Agree with the JavaScript recommendation. Specifically jQuery is easy and most appropriate for page behavior logic. I think CSS should only be look/feel/style...Javascript should be were all your event and behavior logic is.
Related
So, to better explain, I am attaching a simple image of what I am trying to achieve.
There is a button, and three contents (two visible and one hidden located in between as shown above).
When the button is clicked, I want to show the hidden content which is located in between to contents.
Is it possible to achieve this with CSS alone?
For example, I can have the hidden content with display:none; then force it visible somehow?
I am not sure what the most efficient way to achieve this.
Any suggestions will be appreciated.
Thanks!
If you want to achieve this using CSS only then there is a way using check boxes or Radio buttons instead of HMTL button tag.
here is a demo https://jsfiddle.net/nileshmahaja/yt76h26n/
HTML
<input type="checkbox" class="check"/>
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
.box{
height:50px;
width:50px;
background: gray;
margin-bottom:20px
}
.two{
display:none;
}
.check:checked ~ .two {
display:block
}
And you can style checkbox or Radio button as per your convenience.
Do it purely in css solution here:
How to change an image on click using CSS alone?
However, with jquery it can easily be done in 3 seconds with only a couple of lines if you're not opposed to it as shown below!
$("#buttonsid button").click(function(){
$("#idofhiddencontent").toggle();
});
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.btn{
display: inline-block;
padding: 15px 45px;
border: 2px solid #000;
color: #000;
text-decoration: none;
}
div{
width: 100px;
height: 100px;
border: 2px solid #000;
margin: 25px auto;
}
.block-hidden{
display: none;
border: 2px solid #f00;
color: #f00;
}
.btn:focus ~ .block-hidden{
display: block;
}
Button Click
<div class="block">Block</div>
<div class="block block-hidden">Block Hidden</div>
<div class="block">Block</div>
.visible_content:hover > .hidden_content {display:block;}
when you hover on .visible_content , .hidden_content will be shown.
but with click , I don't think that there be any way to do this via css.
but in jquery , it is simple:
$(".visible_content").click(function(){
$(".hidden_content").fadeIn();
});
I'm trying to achieve this in CSS:
I would like the green line to always be the width of the text (no fixed width). I have a constraint, the tex is contained in an H3 tag with no ability to add a span tag inside it.
you could maybe try this aproach also:
<div class="container">
<div class="line"></div>
<h3>RECENT EPISODES</h3>
</div>
.container {
width:100%;
position:relative;
}
h3 {
display:inline-block;
border-bottom:1px solid green;
padding-bottom:10px;
margin:0;
position:relative;
}
.line {
height:1px;
background-color:#ededed;
width:100%;
position:absolute;
bottom:0;
}
http://jsfiddle.net/az6pr1mz/
The grey line needs to go on a block level tag while the green needs to go on an inline tag. This means that you need two nested tags for it to work and that you must either add a span inside the h3 or a div surrounding it. An h3 can always be made inline if needed.
A slightly different approach would be to add the secondary element outside the h3 without surrounding it and position that so it lies directly under the h3.
In any case, you will need a minimum of two elements for the borders to cling to.
Update:
I missed that you don't need span inside the h3. I added a workaround. I am not sure whether this is the only solution. But I think it can be improved though. In the below code, I am using css content property to hide the border of the container.
NOTE: Use as many dots . as you can use to make it work on all resolutions.
CSS
.container {
border-bottom: 1px solid red;
padding-bottom: 10px;
position: relative;
max-width: 100%;
word-break: break-all;
}
.container:after {
content:"....................................................................................................................";
color: transparent;
border-bottom: 1px solid green;
padding-bottom: 10px;
position: absolute;
bottom: -1px;
}
Working Fiddle
For example this code: (is clearly and not uses absolute positions)
HTML:
<h3><span>Recent episodes</span></h3>
CSS:
h3{
text-transform:uppercase;
border-bottom:1px solid #ccc;
}
h3 span{
display:inline-block;
border-bottom:1px solid #080;
margin:0 0 -1px 0;
}
http://jsfiddle.net/tp0nnapu
I might have overseen a really stupid mistake, but I can't find out why this doesn't work:
Here's my HTML, it's a simple menu, and if I hover "Home" or "Play" the font-color of the div "deco" changes to red...
<div class="menu">
<h1>
HOME PLAY LOGIN
<div id="deco">A</div>
</h1>
</div>
CSS:
body {
height:100%;
width:100%;
display: block;
background-color: #000;
overflow: hidden;
margin: 0;
padding:0;
}
.menu {
margin-top:10%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
h1 {
font-family: "Dauphin";
color: #FFFFFF;
}
a {
color: #FFF;
text-decoration: none;
}
a:hover #deco{
color: red;
}
#deco {
font-family: "Invader";
top: 123px;
color: #FFF;
width:100%;
height:100%;
text-align: center;
}
Your selector doesn't match the element. For a:hover #deco to work, the div has to live inside the anchor like so:
<a href="#">HOME
<div id="deco">A</div>
</a>
Modern browsers support the general sibling selector ~:
a:hover ~ #deco
If you need to support browsers that do not support the general sibling selector, you can achieve this with jQuery something like this:
$('a').hover(
function() { $('#deco').addClass('link-hover'); },
function() { $('#deco').removeClass('link-hover'); });
And define the CSS:
#deco.link-hover {
color: red;
}
This isn't working because #deco isn't a child element of the a tag.
The CSS declaration a:hover #deco refers to any element with ID 'deco' that is a child (e.g. contained inside of) an anchor element that is in the hover state.
For it to work you need #deco to be inside of the A tag, a child rather than a sibling element. Or you could leave the HTML as-is and accomplish this with simple jQuery instead (using .css or .addClass to change the style definition on hover).
I added a CSS button like this:
http://pastebin.com/UZCgmqSN
Why can't I use simple HTML code?..
The link href gives the button a blue border + text color, and whenever I removed <A> from it, it still stays the same.
I want the whole button to be one link, not like you need to hover on the text to go to that link.
Basically I don't want the a style affect my button(s).
solution could be: disable Link styling on specify divs
thank you.
Add a padding to the this will make the area around the text also clickable.
Also, apply the following style:
a {
text-decoration:none;
}
a div {
background:#444;
color:#fff;
border:1px solid #333;
text-align:center;
padding:5px;
width:100px;
}
This should do it.
check this out : http://jsfiddle.net/yFZ4y/
EDIT : Using a div or ANY block level element inside an INLINE element (like a) is bad practice. Please use a span instead.
here is an example of a link/button http://jsfiddle.net/CRjrz/
<div>
link text
</div>
a
{
display: block;
width: 100px;
height: 35px;
text-decoration: none;
color: black;
text-align: center;
line-height: 35px;
}
div
{
border: solid 1px black;
width: 100px;
height: 35px;
}
I'm trying to remove the pressed effect from button on IE9. In all other browsers I have no problems.
Please take a look to the code
HTML
<button class="fancy">howdy!</button>
CSS
.fancy {
width: 60px;
height: 30px;
position: relative;
top: 0px;
margin: 0;
padding: 0px;
display: block;
border: none;
padding: 0;
color: #FFF;
font-size: 11px;
background: green;
outline: none;
overflow: hidden;
line-height: 11px;
}
.fancy:active,.fancy:focus
{
padding:0px;
margin:0px;
border: none;
outline:none;
text-indent: 0;
line-height: 11px;
}
Working demo http://jsfiddle.net/MDfvE/
As you can see, when you click the button on IE9 you will see that the text is moved to the right and bottom. I want to remove that.
Any clue? Thank you!
IE only recognizes the :active pseudo class when the element is an anchor.
http://msdn.microsoft.com/en-us/library/cc848864%28v=VS.85%29.aspx
Try changing the button element to an anchor tag and adjust the styling to recreate the look you had for your button.
It's a browser behaviour, a simple solution is to use a link tag instead of button (if its triggering a javascript function).
<img src="myimg"/>
If you still want to use the <button>, I've found that there are some characteristics on each browser (in a simple debug):
Chrome adds outline and padding
Firefox adds a whole lot of stuff with the standart button border
IE messes with the inner text position
So to fix them, you have to manipulate the pseudo selectors for the button behaviour. And for IE, a good solution is to envolve your text on a element, and make it relative positioned. Like so:
<button type="button" class="button"><span>Buttom or Image</span></button>
<style>
button,
button:focus,
button:active{
border:1px solid black;
background:none;
outline:none;
padding:0;
}
button span{
position: relative;
}
</style>
Pen