I've been trying to make a navigation bar with small images which respond(by margin 10px from the top) when you hover over them. I applied the hover effects via a class Selector,
however when I hover over one image the rest of them respond as well. So, can I correct this with the class Selector?
Here's the html side.
<img class="menu" src="weight.png" />
<img class="menu" src="height.png" />
Here's the css:
.menu{
height:100px;
width:100px;
transition:all 0.3s ease-in; margin-left:15px;
margin-top:5px;
}
.menu:hover{
margin-top:15px;
transition:all 0.3 ease-in;
}
Thank you for your help.
The default vertical alignment for inline content is "baseline". This means that your images by default stick to the bottom of your a elements. To fix this, you simply need to set the vertical alignment on your img elements to "top":
.menu {
...
vertical-align: top;
}
JSFiddle demo.
Related
I'm trying to make a Div change its background color on hover but it's not working.
----------HTML-----------
<div class="home-circles" style="background-color:#92cd00">
<span style="color:#1C263C"><b>About Me</b></span>
</div>
<div class="home-circles" style="background-color:#FFCF79">
<span style="color:#663333"><b>Music</b></span>
</div>
<div class="home-circles" style="background-color:#E5E4D7">
<span style="color:#097054"><b>Hi Morgane</b></span>
</div>
----------CSS------------
.home-circles {
width:250px;
height:250px;
border-radius: 200px;
margin:25px;
float:left;
text-align:center;
vertical-align:middle;
line-height:250px;
font-size:50px;
font-family:rochester;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .3s ease-in-out;
}
.home-circles:hover
{
cursor:pointer;
background-color:#fff;
}
The problem seems to be the style attribute in the div. The background color specified in the Div seem to supersede the one specified in .home-circles:hover. Is there a way to get around it without changing the CSS for .home-circles?
Since you're using inline style for all your divs with class home-circles such as background-color:#FFCF79, background-color:#E5E4D7.... in your HTML which will override the style you've defined in your external CSS background-color:#fff.
You can use !important property here:
.home-circles:hover
{
cursor:pointer;
background-color:#fff !important;
}
Fiddle Demo
When an !important rule is used on a style declaration, this
declaration overrides any other declaration made in the CSS, wherever
it is in the declaration list. Although, !important has nothing to do
with specificity. Using !important is bad practice because it makes
debugging hard since you break the natural cascading in your
stylesheets
So basically, you can use !important but it's discouraged. I'd suggest you to move your inline styles to external CSS files instead.
just use !important in hover css
.home-circles:hover
{
cursor:pointer;
background-color:#fff !important;
}
DEMO
Note:inline styles must be overrided,since you are giving background-color in style u should use !important to override it.
When Using !important is The Right Choice
Using !important in your CSS usually means you're narcissistic &
selfish or lazy. Respect the devs to come...
You have a small mistake.
First of all you have to know hierarchy of css. In your div tag inline css background which is
first priority that's why your hover action not working. your default background color should come from css class then hover color will work properly
Hope it will help you
Use the !important property! This will override the inline CSS.
<html>
<head>
<style type="text/css">
.mydiv
{
width:100px;
height:100px;
background-color:red;
}
.mydiv:hover
{
background-color:blue;
}
</style>
</head>
<body>
<div class="mydiv">
</div>
</body>
</html>
I've got two divs, div 1, and underneath it is hidden div 2. When I hover over div 1, I want it to hide, and show div 2. Then, once I mouse off of the area (now div 2), div 1 is displayed again.
Here is the code:
<a href="javascript://" class="hoverable">
<div class="normal" style="background:#666;">Hover over me!</div>
<div class="hover" style="background:#888;">Now you see me!</div>
</a>
and here is the css:
<style>
.hoverable {
cursor:default;
color:#000;
text-decoration:none;
}
.hoverable .hover {
display:none;
}
.hoverable:hover .normal {
display:none;
}
.hoverable:hover .hover {
display:block;
}
</style>
My only problem with this is that is is very quick, cut and dry, and not very "fancy". I'd like to add something simple like a fade effect.
I've gotten this working, without the fade effect, here:
http://jsfiddle.net/pBDGW/
If anyone knows how to make those two divs transition with a fade-out, please let me know!
You can use CSS transition with opacity like this:
.hoverable {
cursor:default;
color:#000;
text-decoration:none;
position: relative;
display: block;
}
.hoverable .hover {
opacity:0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.hoverable .hover,
.hoverable .normal{
transition: opacity .5s;
-o-transition: opacity .5s;
-ms-transition: opacity .5s;
-moz-transition: opacity .5s;
-webkit-transition: opacity .5s;
}
.hoverable:hover .normal {
opacity:0;
}
.hoverable:hover .hover {
opacity:1;
}
You can see the jsfiddle here: http://jsfiddle.net/pBDGW/12/
Some explanation:
The transition applied to both div are the main code that make them fade in & out. You can read more about it here: http://css3.bradshawenterprises.com/transitions/
Since you want the first div to fade out, and the second div to fade in, there will be a moment when both div have to be visible partially, hence position: absolute and some positioning on the second div (to make it overlap with the first div).
You are wrapping an anchor (<a>) around both div, which is actually not encouraged, so I have to give it display: block; . A better approach (HTML-wise) is to wrap both div inside another div (still use the same class hoverable), and use 2 different anchors inside each div.
EDIT: this approach http://jsfiddle.net/pBDGW/14/ works too. Here you only fade out the first div, while the second div is always visible but is hidden under the first div when not hovering. It is shorter css, but I don't recommend this approach though because I sometimes have issues with getting the first div to go on top on different browsers.
You can use jQuery, it has functions fadeIn and fadeOut and also its easy to hide() and show() on events mouseOver and mouseLeave.
You can see fiddle here.
$(document).ready(function(){$(".hover").hide();
$(".normal").mouseover(function(){
$(".normal").fadeOut(0);
$(".hover").fadeIn(1000);
});
$(".hover").mouseout(function(){
$(".normal").fadeIn(1000);
$(".hover").fadeOut(0);
});});
You can use transitions:
ADD THIS TO YOUR :HOVER
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
This adds the effect of fade IN/OUT
Addition: this will only work if you have property set for :hover, for example if you want to change the color, or background or what ever..
I'm fairly new to web design and I've been working on a CSS way of creating a drop down menu which appears initially when a parent div is hovered. However once visible, I need the menu to stay up until the mouse is moved off the whole menu.
I've been able to make the menu appear and disappear, however it disappears too quickly - disappearing when I leave the parent div. Example below.
I've tried nesting within a third div which changes between display:block and display:none but no luck
Code
<div class="menuc">
<div class="menua"></div>
<div class="menub">
<p class="footertext">Home</p>
<p class="footertext">Home</p>
<p class="footertext">Home</p>
<p class="footertext">Home</p>
</div>
</div>
Css
.menua {
width:200px;
height:50px;
background-color:rgba(0, 0, 0, 0.50);
z-index:999;
}
.menua:hover ~ div.menub {
opacity:1;
z-index:999;
}
.menub {
width:200px;
height:600px;
background-color:rgba(0, 0, 0, 0.50);
opacity:0;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
-ms-transitiom: opacity .5s linear;
-o-transition: opacity .5s linear;
transition: opacity .5s linear;
z-index:999;
display:block;
}
.menuc {
display:none;
}
.menuc:hover {
display:block;
}
http://jsfiddle.net/qp3wu/
Apologies if this is a fairly amateur mistake (doh).
All answers and suggestions greatly appreciated
Just let .menub element stay when .menub itself is also hovered:
.menua:hover ~ .menub, .menub:hover {
opacity:1;
}
The comma is used the define a new selector. The above is the same as:
.menua:hover ~ .menub{
opacity:1;
}
.menub:hover {
opacity:1;
}
But shorter.
Ignore any event; hide the element, but still use opacity effect
Now to make sure the .menub does not react to any events(like hovering), you can just hide it:
.menua:hover ~ .menub, .menub:hover {
visibility: visible;
opacity:1;
}
and on hover show it again:
.menub {
visibility: hidden;
}
I use css visibility to keep the same effect as you would have with only opacity. It will still have the space of the element(unlike what display: none; does; collapsing the space).
Delete remaining space when not visible
To go even further and fix the remaining spacing, you can add height: 0; as default and when hovered set the height to your desired height(600px in this case).
Remove the gab inbetween menua and menub
If you want to get rid of the gab between menua and menub but still use the default margin, you can reset the top margin of the first <p> element:
.menub p:first-child
{
margin-top: 0;
}
jsFiddle
The text beneath the menu's is to show you that there will be no space when the element is not visible.
You need to make a few changes:
One wrap the menub with menua div to keep the hover effect:
<div class="menua">
<div class="menub">
<p class="footertext">Home</p>
<p class="footertext">Home</p>
<p class="footertext">Home</p>
</div>
</div>
Two position your menub inside menua i use absolute position. With this you avoid other elements to be moved by the submenu.
.menua {
position:relative;
}
.menub {
position:absolute;
top:100%;
left:0;
}
Three you can use opacity to give an effect but to hide and show you really need display property:
.menub {
display:none;
}
.menua:hover div.menub {
display:block;
}
An example http://jsfiddle.net/qp3wu/23/
I'm trying to do a dropdown menu with a div. The transition on the div is fine and everything is working great. But I don't know how to get the text that's in the dropdown area do be hidden when I'm not hovering?
Html code. not much but it is droping down as it should. I don't want menu to be hidden only the text writen below it.
<div class="dropdown">Menu
<br/>Games
<br/>Food
</div>
CSS code. Transitions and all.
div.dropdown
{
position:absolute;
width:920px;
height:20px;
top:110px;
left:50%;
margin-left:-460px;
z-index:1;
background-color:gray;
-webkit-transition: height 2s ease;
background:black;
text-align:center;
color:White;
}
div.dropdown:hover
{
height: 45px;
-webkit-transition: height 0.1s ease;
}
You can use the css:
overflow: hidden;
in the .dropdown class.
This will allow you to hide everything that displays outside of the elements bounds.
here's a fiddle
Change your html so that your dropdown items are in an ordered list <ul> inside the div
Add some css so that the list is normally hidden
div.dropdown ul{
display:none;
}
div.dropdown ul:hover{
display: block;
}
Also, remove the existing height limit on the dropdown div.
then some JavaScript/jQuery to make the list appear when you hover over the menu
$('div.dropdown, div.dropdown ul').on('hover', function(){
$('div.dropdown ul').show();
}
$('div.dropdown, div.dropdown ul').on('mouseleave', function(){
$('div.dropdown ul').hide();
}
<nav id="main_nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Forum</li>
<li>Contact Us</li>
</ul>
</nav>
#main_nav{
background:green;
}
#main_nav li{
display:inline-block;
list-style:none;
padding:10px;
font-weight:bold;
}
#main_nav li a{
text-decoration: none;
color:white;
padding:10px;
}
#main_nav li{
-webkit-transition: opacity .5s, background .5s, color .5s;
-moz-transition: opacity .5s, background .5s, color .5s;
-o-transition: opacity .5s, background .5s, color .5s;
}
#main_nav li:hover{
color:red;
background:rgba(0, 0, 200,.5);
}
This is my navigation bar, but I have a problem. Between each link is a small space. When I hover over them quickly, it doesn't look nice. How do I remove it?
A few ways:
Remove the white space between the list items ( jsFiddle example)
Use comments (<!-- -->) to occupy the white space gap (jsFiddle example)
Close the list item tags on the next line (jsFiddle example)
Note that there's also a fourth option where you can set the font-size to zero on the #main_nav element, and then set the font-size on the anchors to something larger, but there have been issues with some earlier builds of Android with this technique. jsFiddle example.
it happens when you use display:inline-block; for list element.
you should use float:left or play with margins/paddings
Arrange all the list in single line will remove the space...
<li>Home</li><li>About Us</li><li>Forum</li><li>Contact Us</li>
Updated fiddle : http://jsfiddle.net/RYh7U/78/
See this fiddle: http://jsfiddle.net/zteA7/
It is because of inline-block creating space.
Make the <li> element floated and use the CSS :after selector to insert a clearer block element to make the nav block the height that of the menu. (no html required).
You also don't need to specify the container heights which should mean line-breaks will work
#main_nav li{
display:inline-block; /* the new web designer disease ?? */
list-style:none;
padding:10px;
font-weight:bold;
margin:0;
}
Just rewrite your html this way
<ul>
<li>Home</li><li>About Us</li><li>Forum</li><li>Contact Us</li>
</ul>
That's because of the property display: inline-block;, which causes the li "blocks" to still behave as inline elements, and therefore build spaces between them. I've had this problem a couple of times and I know two (not so beatiful) solutions:
Make the li elements float: left, but be careful to not mess up the rest of your design.
Write space-filling html comments between the li elements, so no "space" is recognized between them by the browser.
Remove any padding from your <ul> tag. It might be useful for you to use a reset.css to avoid problems like this http://meyerweb.com/eric/tools/css/reset/