Intention:
a div with a pretty picture and title
when the visitor hovers over the div, the pretty stuff is replaced by a descriptive text
a CSS-only solution
simple, right?
Here's what I am trying:
HTML:
<div class="drunter">
I am below
<div class="drueber">
I am on top
</div>
</div>
CSS:
.drunter {
position:relative;
background-color:#f00;
}
.drueber {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
display:none;
background-color:#00f;
}
.drueber:hover {
display:block;
}
jsfiddle
Why is this not working?
When I view the page in Chrome and go about it with the inspector, switch on the :hover state on the "drueber" element, it works as expected. But when I actually hover over the div, nothing happens.
As the .drueber has display:none; property it can't be hovered. so you need to trigger the hover event on the parent like this :
.drunter:hover .drueber {
display:block;
}
DEMO
.drunter {
position:relative;
background-color:#f00;
}
.drueber {
display:none;
background-color:#00f;
}
.drunter:hover .drueber {
display:block !important;
}
i make a little changes in css try this code.
Related
I've been trying to code this tumblr page of mine and I'm currently stuck at the links section. I want my sidebar image to change when I'm hovering over my links, the "HOME", "ASK" etc. Is it possible to do this without using javascript? I've googled it but I haven't been able to come up with a solution, having tried adding different image classes, etc. All I've been able to do is have images appear UNDER the links. I've added the sidebar and links code from my page below. Thanks in advance!
#sidebar {
position:fixed;
width:203px;
top:70px;
left:70px;
height:auto;
padding:15px;
background-color:#1c1c1c;
}
#sidebarimg img {
width:203px;
padding-bottom:5px;
}
#links {
width:203px;
height:auto;
margin-left:auto;
margin-right:auto;
font-family:times;
text-align:center;
text-transform:uppercase;
opacity:2;
}
#links a {
margin-top:1px;
margin-bottom:2px;
border:1px solid #fff;
width:98px;
display:inline-block;
color:#999999;
padding-top:5px;
padding-bottom:5px;
font-size: 13px;
-moz-transition-duration:0.8s;
-webkit-transition-duration:0.8s;
-o-transition-duration:0.8s;
}
#links a:hover {
background:#fff;
color:#000;
-moz-transition-duration:0.8s;
-webkit-transition-duration:0.8s;
-o-transition-duration:0.8s;
}
<div id="sidebar">
<div id="sidebarimg"><img src="{image:sidebar}"></div>
<div id="links">
{text:Link 1 Text}
ASK
MY EDITS
{text:Link 4 Text}
</div>
EDIT: thanks for the help guys!
No, this is not possible. You can only change an element based on CSS hover behaviours based on the hover state of itself or one of the higher identifiers in your selector.
You can 'cheat' a little using the adjacent and general sibling selectors, but not to entirely different parts of the DOM tree.
Here's an example of both cases where the hovering of an element can affect another element's rendering:
div {
border:1px solid black;
padding:5px;
}
div:hover button:first-of-type {
background:red;
}
button:hover + button {
background:red;
}
<div>
<p>The first button will highlight when you mouse into the container. The second button will highlight when you hover over the first.
<button>Button 1</button><button>Button 2</button>
</div>
In all more complex cases you'll need Javascript.
You could add an :after pseudo element to the links.
The pseudo element could then be position absolutely above the links.
Then apply a different background-image for each link.
See this jsFiddle
#links a:after {
content: '';
position: absolute;
top: 15px;
left: 15px;
width: 200px;
height: 200px;
}
#links a:nth-child(1):hover:after {
background-image: url('...');
}
Hello my wonderful peeps.
The heading "whatever" overlaps on my list.
I want the list to appear after the heading.
<div style="width:1024px;height=auto;position:absoulte;min-height:768px;">
<div class="heading">
<h1>Whatever</h1>
</div>
<div class="list" id="listID" >
<div style="height:15px;">Nope</div>
<div style="height:15px;">Yes</div>
<div style="height:15px;">Maybe</div>
<div style="height:15px;">Definetely</div>
</div>
<button>Print</button>
<button style="posititon:relative;top:0px;">add</button>
</div>
and this is the css
.heading
{
position:relative;
top:50px;
}
.list
{
position:relative;
min-height:10px;
top:0px;
margin-left:20px;
}
http://jsfiddle.net/zd5n3L5z/
Help me out. Thank you :)
Change top to margin top for the heading
.heading
{
position:relative;
margin-top:50px;
}
.list
{
position:relative;
min-height:10px;
top:0px;
margin-left:20px;
}
Since you dont want to affect the possition in relation to other elements, you don't need to use the relative attribut. So your 'CSS' should look like:
.heading
{
margin-top:50px;
}
.list
{
min-height:10px;
margin-left:20px;
}
This will keep your css clean!
Add display: inline in class .list:
css
.heading
{
position:relative;
top:50px;
}
.list
{
position:relative;
min-height:10px;
top:0px;
margin-left:20px;
display: inline;/*Add display inline*/
}
fiddle
inline This value causes an element to generate one or more inline
boxes.
Also you have a syntax error in your main div container. Is position:absolute no absoulte.
You set the .heading top:50px. What happens here is that this value (50px) is not relative to the .list but to the div it sits in. Simply change the value like this:
.heading
{
position:relative;
}
Don't use position top for ".heading" class
.heading
{
position:relative;
}
.list
{
position:relative;
min-height:10px;
margin-left:20px;
margin-bottom:30px;
}
button{clear:both;}
Trying to vertically align text for the buttons in the middle, however i want entire button are to be a link (not just text) so i stretched the anchor tag, now i cannot vertically align text anymore even if i wrap it in another tag still does not work for some reason.
* {
margin:0;
padding:0;
}
hr {
border:0;
height:1px;
background-color:#000000;
}
ul {
border-spacing:15px;
width:100%;
display:table;
}
li {
display:table-cell;
background-color:#ccc;
height:75px;
text-align:center;
}
a {
width:100%;
height:100%;
display:block;
background-color:#FCF;
text-decoration:none;
opacity:0.5;
}
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
ABOUT<HR/>US
</li>
<li>
NEW<hr/>EVENTS
</li>
</ul>
Key points:
I like to keep buttons auto stretch to the page width like it is now.
I like to have entire button area to be click able not just text.
I like to keep unordered list for menu structure as its semantically correct for menu
http://jsfiddle.net/vWrE8/
Final Result Should look like this http://i.stack.imgur.com/kKEc8.png
In my opinion wrapping text inside anchor tag with div is a way to go and then valign-middle, however i cannot make it work.
Here is one solution that may work for you:
Demo Fiddle
You need to remove the disiplay:block from the anchor tags, and vertically align them throught he li element.
CSS
li {
// other styles here
vertical-align: middle;
background-color:#FCF; //<-move the bg to here
}
a {
// other styles here
// display:block;
// background-color:#ccc;
}
I don't think this is achievable without wrapping the multi-line texts in another element, but once that's done, it's quite straightforward. Assuming that wrapper element is a div, just add
a div {
display:inline-block;
width:100%;
vertical-align:middle;
}
a:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
As per http://jsfiddle.net/vWrE8/9/
BadAdviceGuy's solution is good, but given you want whole block to be clickable, you can try fluid padding for the anchor tags. Fiddle
CSS:
a {
width:100%;
height:100%;
display:block;
padding: 50% 0;
text-decoration:none;
opacity:0.5;
}
This is as close as I can get to what you want: http://jsfiddle.net/vWrE8/6/
Only works for one line break, after that it falls apart... =/
* {
margin:0;
padding:0;
}
hr {
border:0;
height:1px;
background-color:#000000;
}
ul {
width:100%;
list-style:none;
}
li {
display:inline-block;
vertical-align:top;
background-color:#ccc;
min-width:110px;
height:75px;
text-align:center;
margin:0px 10px;
}
a {
height:100%;
display:block;
background-color:#FCF;
text-decoration:none;
opacity:0.5;
line-height:2em;
}
a span {
position:relative;
display:block;
line-height:1em;
top:30%;
}
<ul>
<li> <span>HOME<span></li>
<li><span>ABOUT<span></li>
<li><span>ABOUT <HR/>US<span></li>
<li><span>NEW <HR/>EVENTS<span></li>
</ul>
Actually I want to give hover to div which is inside hyperlink but I don't know how to in css.
These divs actually have background images attached to them in css.
<div class="header_menu">
<div class="foa_logo"><img src="images/FOA-Logo.jpg"/></div>
<div class="address"></div>
<div class="home"></div>
<div class="about"> </div>
<div class="services"></div>
<div class="contact"></div>
</div>
div {
width:100px;
transition: width 2s;
}
div:hover {
width:200px;
}
replace div with .foa_logo if you want to select just that class.
I've created a jsfiddle for you showing how to do the hover you want. I removed the divs in the hyperlinks, because they are not useful. You can simply set the styles for the a tags and then you get your hovers
http://jsfiddle.net/FHWb6/
.header_menu a {
display:block;
height:40px;
width:100px;
line-height:3;
text-align:center;
font-family:Arial;
font-size:14px;
text-transform:uppercase;
float:left;
position:relative;
background:url(); /*put your image here*/
background-color:#CC0;
color:#FFF;
text-decoration:none;
}
.header_menu a:hover {
background:url(); /* put your hover image or position here */
background-color:#ececec;
color:#000;
}
I added some extra code in there just to do some base level styling - color, height and width will most likely change for you.
Try this:
element:hover {
property: value;
}
By this, you can change the CSS properties of the elements when they are hovered over!
So for you, you will try it as:
.home:hover { // on the home div..
// all the changes here
}
I learn and use css and css3 around 2 years but i dont know 1 thing and i cant find a really good answer or fix for this.
So here is an example :
I created a div and inside this div we have a link (its a button).
When i hover my mouse on the div this div will change the bg-color but the link not because im above the div... So when im above the div this div and the link too will change the color or background this is what i need... But how to do it ? I never used this but now i think i'll need this for my next work :))
Thank you very much!
It's very easy to achieve using css: (working jsFiddle)
HTML:
<div class="container">
<a class="button">some text</a>
</div>
CSS:
.container:hover{
background-color:red;
}
.container:hover .button{ // selector for .button which is in a hovered .container
background-color:blue;
}
Try this:
<div id="test">
A link
</div>
CSS :
div#test:hover {
background-color: red;
}
div#test:hover a {
background-color: red;
}
What you're asking is the following CSS selector:
div:hover a{
/* your styles here */
}
Demo here
Hope this demo link will work for you.
*{
padding:0;
margin:0;
}
body {
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#000;
padding:20px;
background-color:#F2F2F2;
}
ul, li, ol {
list-style-type:none;
}
.wrapper {
width:95%;
padding:10px;
overflow:hidden;
height:100%;
margin:0 auto;
border:1px solid green;
}
.spacer {
clear:both;
font-size:0;
line-height:0;
height:0;
}
.wrapper:hover {
background-color:#999999;
cursor:pointer;
}
.btmoOne {
width:170px;
margin:0 auto;
height:20px;
background-color:#FF0000;
padding:10px;
}
.wrapper:hover .btmoOne {
background-color:#006600;
}