What I want is I have an invisible div somewhere, and then when you hover over it it appears (maybe with a transition, not necessary.). So I've tried the following:
-- CSS code
div.appearingBox {
display: none;
width: 100px;
height: 100px;
}
div.appearingBox:hover {
display: block;
width: 100px;
height: 100px;
background-color: rgb(0,0,0);
border: 1px solid rgb(0,0,255);
}
-- HTML code (Added)
<html>
<body>
<div class="appearingBox">
</div>
</body>
</html>
This doesn't work... Please help!
You'll need a wrapping div. Because it's not visible, it can't respond to :hover. Note that the :hover is on the wrapper instead of the element itself. That is because the wrapper is "visible" but transparent.
http://jsfiddle.net/Cs87c/1/
HTML:
<div class="appearingBox">
<div>Hidden</div>
</div>
CSS:
.appearingBox div {
visibility: hidden;
width: 100px;
height: 100px;
}
.appearingBox:hover div {
visibility: visible;
width: 100px;
height: 100px;
background-color: rgb(0,0,0);
border: 1px solid rgb(0,0,255);
}
(Edited to a cleaner version)
Related
I am trying to make a small yellow square of 300x300 pixels let's say with a black border. I use:
<style>
body {
background-color: yellow;
border: 1px solid #000000;
width: 300px;
height: 300px;
}
</style>
But this gives the whole page yellow and not just the square... How can I fix this? Ty
The body tag selects the entire body of the html document. You need to give your box a id or class and then apply the CSS to that.
For example:
#box {
background-color: yellow;
border: 1px solid #000000;
width: 300px;
height: 300px;
}
<div id="box"></div>
You've applied to the body, that basically means the whole page.
Insert a DIV on the body.
HTML
<div class="div-class"></div>
CSS
.div-class{
background-color: yellow;
border: 1px solid #000000;
width: 300px;
height: 300px;
}
If you want only a square of 300x300 you need to make a div for that
**HTML:**
<div class='square'></div>
**CSS**
.square {
background-color: yellow;
border: 1px solid #000000;
width: 300px;
height: 300px;
}
Now you are applying your style to the body (whole page). That's why your whole window is yellow instead of 300x300
You need to apply the styles to a div and not to the entire body...
.square {
background-color: yellow;
border: 1px solid #000000;
width: 300px;
height: 300px;
}
<div class="square"></div>
Don't use "body", use "div"
div {
background-color: yellow;
border: 1px solid #000000;
width: 300px;
height: 300px;
}
Fiddle: https://jsfiddle.net/Lrgqp2ud/
When I mouse over div.divClass, the tooltip text should show.
How can I achieve that?
.divClass {
width: 200px;
height: 200px;
border: 1px solid
}
<div class="divClass">
test
</div>
EDIT
Actually I want to show tooltip top of the ANCHOR element when mouse over on div. If I add title in Div means I'm getting alignment issue.
The title attribute cannot force a tooltip to appear in one fixed location, regardless of where the hover occurs. That's not normally how the tooltip works. However, here's a method that may work for you.
.divClass {
width: 200px;
height: 200px;
border: 1px solid;
position: relative;
margin: 30px;
cursor: pointer;
}
span { display: none; }
.divClass:hover > span {
display: inline-block;
position: absolute;
top: -25px;
left: 0;
border: 2px solid red;
background-color: yellow;
}
<div class="divClass">
test
<span>Tooltip text</span>
</div>
jsFiddle
References:
title attribute ~ MDN
Global attributes ~ MDN
I have a page where I have a div at the bottom of the page which when clicked shows another div, just above the bottom div.
I'd like to avoid the footer divs overlapping the content div higher up the page when the window is resized.
The heights of the divs involved shouldn't change.
Is a CSS-only solution possible?
I've created a jsfiddle here
CSS
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
}
#content {
height: 300px;
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
HTML
<div id="container">
<div id="content">content
</div>
<div id="footer">
<div id="footer-content">footer-content</div>
<div id="footer-footer">Click me to expand</div>
</div>
</div>
JS
$("#footer-footer").on("click", function (evt) {
$("#footer").toggleClass("expanded");
});
Simply add position: relative to the #container. This way the absolute positioning of the footer refers to the container.
http://jsfiddle.net/5bkznxud/5/
You'll probably notice that in the example above there's always a scrollbar on the right. This is because of the borders and padding on #container. Here's an example with outline (border with no calculated width) and without any padding:
http://jsfiddle.net/5bkznxud/6/
TIP: Always use outline instead of border for blocking a layout OR use box-sizing: border-box. This causes a box' dimensions to also calculate for the border. Otherwise a box with width of 100% and border will span slightly wider than you want.
It can be solved by using calc().
In this case you can create a jQuery function that get the height of footer-content and footer-footer -> .height(). Without jQuery, I don't think it's possible.
Here is an example:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
min-height: 420px;
}
#content {
height:calc(100% - 135px);
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
http://jsfiddle.net/dokmngv0/
Browser support for the calc() feature: http://caniuse.com/#feat=calc
I am making a symmetri webpage for my project. I used halve image and want its symmetry counterpart two also show on hovering. I mean that when we will hover on container, the image will get completed to reveal the full image. How do I achieve this.
#container {
height: 300px;
width: 241px;
border: 1px solid red;
}
img {
height: 300px;
width: 120px;
border-right: 1px dotted gray;
display:inline-block;
float:left;
}
<h1 style="font-family:Algerian;">Symmetry</h1>
<div id="container">
<img src="http://i.imgur.com/qIPYs5i.jpg">
</div>
You can make a second class with the :hover keyword and set the background-image property to the complete image there.
Something like
#container:hover {
height: 300px;
width: 241px;
border: 1px solid red;
background-image: url('Your Image url')
}
should do the trick.
You can use css3 transforms to mirror that image and then use the :hover pseudoclass to reveal it when the user hovers over the container:
#container {
height: 300px;
width: 242px;
border: 1px solid red;
}
#container:hover .second{
display: block;
}
img {
height: 300px;
width: 120px;
border-right: 1px dotted gray;
display: block;
float:left;
}
.second {
transform: scale(-1, 1);
display: none;
}
<h1 style="font-family:Algerian;">Symmetry</h1>
<div id="container">
<img class="first" src="http://i.imgur.com/qIPYs5i.jpg">
<img class="second" src="http://i.imgur.com/qIPYs5i.jpg">
</div>
I have a div as a content box and have another div inside that for the title. The outer div has border-radius set but the inner div hides it.
HTML:
<div id='box'>
<div id='boxTitle'>
This is the title
</div>
</div>
CSS:
#box {
height: 250px;
width: 250px;
border-radius: 10px;
background: #bbb;
}
#boxTitle {
width: 100%;
background: #000;
color: #fff;
text-align: center;
}
JSFiddle: http://jsfiddle.net/AAUbA/
How do I fix it so I can see the rounded corners at the top of the outer?
Use overflow: hidden on your #box element:
#box {
height: 250px;
width: 250px;
border-radius: 10px;
background: #bbb;
overflow: hidden
}
See the updated Fiddle here: http://jsfiddle.net/AAUbA/2/
As an aside: it's worth considering adding in vendor-prefixes to ensure better cross-browser compatibility.
This is a good write-up on how to use the property.
You can use this tool to auto-generate the CSS you need.
Give #boxTitle the same radius on both the top corners as the box. As already suggested you can also set the overflow to hidden with overflow:hidden;. Both working but if you want to add something outside of #box it won't be displayed, with this code it will be displayed:
HTML:
<div id='box'>
<div id='boxTitle'>
This is the title
</div>
</div>
CSS:
#box {
height: 250px;
width: 250px;
border-radius: 10px;
background: #bbb;
}
#boxTitle {
width: 100%;
background: #000;
color: #fff;
text-align: center;
border-top-right-radius:10px;
border-top-left-radius:10px;
}
JSFiddle demo
add overflow: hidden on your #box element.