I have used the global element selector a:hover{} for hovering over most elements in the web page. But for all the elements in the footer, I would like to override the hovering effect.
So my question is how can I override the element selector a:hover{} when it is used elsewhere since I don't want all the a elements to hover
HTML
<body>
<div class="header">
<div class="header_logo">
<img id ="logo" src="civic-logo.jpg">
</div>
<div class="header_title">
<div id="titles">
<ul>
<li>ABOUT CIVIC<li>
<li>PRODUCTS
<ul>
<li>CEMENT</li>
<li>STEEL</li>
<li>BRICKS</li>
<li>SAND</li>
</ul>
</li>
<li>CONTACT US </li>
</ul>
</div>
</div>
</div>
<div class="content">
<img src="images/clt3.jpg">
</div>
<div class="footer">
<div class="footer_upperspace">
<ul>
<li>CIVIC HOME</li>
<li>INQUIRY</li>
</ul>
</div>
</div>
</body>
CSS
/*Main Header Container */
.header{
color:#FFFFFF; /*White Color*/
height:60px;
width:100%;
margin:auto;
}
/*Inner Logo Container on the left*/
.header_logo{
width:40%;
height:100%;
float:left;
}
#logo{
height:100%;
top:0;
left:0;
width:50%;
}
/*Inner Title Container on the right*/
.header_title{
width:60%;
float:left;
}
#titles{
position:absolute;
top:20px;
font-family: "Times New Roman", Times, serif,Georgia;
font-size:97%;
color:#B8B8B8;
}
ul{
list-style-type:none;
}
li{
display:inline-block;
}
a{
text-decoration: none;
color:inherit;
padding: 21px 10px;
}
ul a:hover{
background-color:#666699; /*Purple Color */
}
ul li ul{
display:none; /*Hiding The Child Elements*/
}
li ul li{
padding: 21px 10px;
background-color:#666699 ;
}
ul li:hover ul{ /*For all the ul elements whose parent is being hovered over*/
display: block;
position: absolute;
width: 100%;
top: 40px;
left: 0;
white-space: nowrap;
}
ul li ul li:hover{
background-color:#C0C0C0;
}
*{border:0;
margin:0;
padding:0;
}
/*Main Content Section*/
.content{
height:525px;
margin:auto;
background-color:#C0C0C0;
}
img{
width:1280px;
height:515px;
}
/*Footer*/
.footer {
margin:auto;
background-color:#707070;
height: 100px;
}
.footer_upperspace {
background-color:#C0C0C0;
height:40%;
}
I have attached the JSFiddle to give you an insight of what I am doing
https://jsfiddle.net/rajivsr2309/b2o3Lzny/
You can always use a stricter selector (with higher specificity) to override the less strict one. For example:
a:hover {color: red}
a.cancel:hover {color: green}
Some link
Some link
Some link
Some link
Some different link
Some link
In your case, the selector is: .footer a:hover: https://jsfiddle.net/b2o3Lzny/2/
Again, since you're trying to undo a general rule, perhaps your approach is wrong and you could consider making a specific class just for those anchors you want to style, not all of the anchors, and then undo many of them.
Try this:
.footer a:hover { background-color: yellow; }
Revised Demo
With .footer preceding a:hover, this is now a descendant combinator selector which matches only hovered anchor elements that exist within elements with class footer.
Related
I have looked all over for this and I can't seem to figure it out. I have a list of links that show an image when hovering over each one. I also have a default image in that same place holder when no links are being hovered over. How do I make that default image disappear when the links showing their images. I don't want to use backgrounds to cover the default image.
https://jsfiddle.net/76tnfh96/2/
HTML:
<div class="links">
<p class="default_img"><a><img src="http://thedeskdoctors.com/Images/LifePreserver.jpg"></a></p>
<ul id="over" class="links">
<li><a>Link 1<span><img src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/09/IPOLogo.png"></span></a></li>
<li><a>Link 2<span><img src="http://mojosimon.files.wordpress.com/2011/12/large-company.jpg?w=600"></span></a></li>
<li><a>Link 3<span><img src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/07/seo-for-small-business-300x200.jpg"></span></a></li>
</ul>
</div>
CSS:
<style type="text/css">
.links .default_img a {
top:100px;
float:right;
width:100px;
height:100px;
background:#000000;
position:absolute;
display:none;
}
/*Link position*/
ul.links {
list-style:none;
padding:0;
width:100px;
}
.links li {
width:200px;
color:#000000;
}
/*Hover Image Position/transition out*/
.links li a span, .links li a b {
position:absolute;
right:8px;
top:-999em;
display: none;
}
.links li a:hover span {
top:24px;
display: block;
}
</style>
With jquery:
$("li a").mouseenter(function() {
$(".default_img").eq(0).hide();
});
$("li a").mouseleave(function() {
$(".default_img").eq(0).show();
});
You can leave your whole Markup like what you already had, and add this JavaScript code to your page. You do not need to add any frameworks, and this runs on all browsers.
var links = document.querySelectorAll("#over a");
[].forEach.call(links, function(value) {
var default_image = document.querySelector(".links .default_img a");
value.addEventListener("mouseover", function(){
default_image.classList.add("hidden");
});
value.addEventListener("mouseleave", function(){
default_image.className = default_image.className.replace(/\hidden\b/,'');
});
});
Example
(The example might lag a bit because your CSS moves your images like wild)
Example 2
(Moved the images for better testing purposes)
Just changed a couple of things so you don't have to use jQuery/javascript. To be able to hover action another non dependent element you would need javascript as that would be called a disjointed rollover.
<ul id="over" class="links">
<li><a>Link 1<span><img src="http://thedeskdoctors.com/Images/LifePreserver.jpg"></span></a></li>
<li><a>Link 2<span><img src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/09/IPOLogo.png"></span></a></li>
<li><a>Link 3<span><img src="http://mojosimon.files.wordpress.com/2011/12/large-company.jpg?w=600"></span></a></li>
<li><a>Link 4<span><img src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/07/seo-for-small-business-300x200.jpg"></span></a></li>
</ul>
</div>
<style type="text/css">
/*Link position*/
ul.links {
list-style:none;
padding:0;
width:100px;
}
.links li {
width:200px;
color:#000000;
}
/*Hover Image Position/transition out*/
.links li a span {
position:absolute;
left:200px;
display: none;
}
.links li a span img {
width: 100px; height:100px;
}
.links li a:hover span {
top:24px;
display: block;
background: none;
}
.links li:first-of-type a span, .links li:first-of-type a:hover span{
display:block;
background: url(http://thedeskdoctors.com/Images/LifePreserver.jpg) no-repeat 0 0;
}
</style>
Changed image sizes just so it would fit in view while testing.
I am trying to make a navigation bar with drop down menus. I've created the navigation bar and used bootstraps "pull-left" class to move it to the left. But the dropdown menu I have created using jQuery is now also moved the left since the HTML code is contained in the div marked as "pull-left" I have googled and tried out stuff for a few hours, but I couldn't quite find a solution.
The HTML for the Navigation bar
<div id = "nav">
<div class = "container" >
<div class = "pull-left ">
<img class = "logo-image" src = "Logo2.png" />
</div>
<ul class = "pull-left">
<li class "logo">Home</li>
<li>About</li>
<li>
Projects
<ul>
<li>Stealth Game </li>
</ul>
</li>
<li>Gallery</li>
<li>Tutorials</li>
</ul>
<ul class = "pull-right">
<li> Follow me</li>
</ul>
</div>
The CSS
#nav li{
display:inline;
padding-right : 5px;
}
#nav ul ul {
display:none;
position:fixed;
z-index:999;
}
#nav li li {
float: auto;
}
#nav li a {
width:150px;
display: inline-block;
text-align:center;
color:#000;
margin-right:5px;
height:35px;
line-height:35px;
text-decoration:none;
font-size:80%;
border:1px solid #ccc;
}
#nav ul{
list-style-type:none;
margin:0;
padding:0;
}
#nav li li a {
background:#EBE7E6!important;
text-align:left;
height:auto;
line-height:1;
width:150px;
padding:8px 20px 8px 22px;
border:1px solid #D0D0D0;
border-top:none;
margin-right:0;
}
And the JavaScript
$(document).ready(function() {
$("#nav li:has(ul)").hover(function(){
$(this).find("ul").slideDown();
}, function(){
$(this).find("ul").hide();
});
});
So the actual problem is, that the submenu, that is appearing doesn't appear under the menu it is opened from, but is also pulled to the left since I used this bootstrap class to move my navigation bar to the left.
Two things resolve this:
#nav li {
display:inline-block;
...
}
#nav ul ul {
position:absolute;
...
}
Demo
You have:
#nav ul ul {
display:none;
position:fixed;
z-index:999;
}
The position:fixed on the submenu is probably what is giving you positioning problems.
edit:
you want to use position: absolute instead.
another edit, set position: relative on the parent LI, you will also need to set the display to block and because they are no longer inline elements you will want to float them left:
#nav li{
position: relative;
display: block;
float: left;
padding-right: 5px;
}
Fiddle with this working: https://jsfiddle.net/DTcHh/
I have some sort of space in between my li tags I don't where it's coming from? How can i remove this?
Also, I'd like to change the color of the font to white on hover of the li
JSFIDDLE http://jsfiddle.net/omarel/tfyxL66c/
CSS
.nav_container {
text-align: center;
width:100%;
}
.nav_container ul {
/* margin-top:15px; */
margin-left:30px;
}
.nav_container ul li {
display: inline-block;
text-align: center;
padding-left:40px;
padding-right:40px;
margin:0px;
height:80px;
cursor:pointer;
}
.nav_container ul li:hover {
background-color:#08298A;
}
.nav_container a:hover {
color:#fff;
}
header {
width:100%;
margin: auto;
box-shadow:0 0 8px rgba(0,0,0,0.1);
min-width:410px;
}
.navlogo {
z-index:99;
}
.navlogo img {
width:100px;
margin:10px 10px 10px 10px;
}
.floatleft {
float:left;
}
.floatright {
float:right;
}
.centerdiv {
margin:0 auto;
}
#media only screen and (min-width:700px) {
header {
max-width:1250px;
}
.container {
max-width:1250px;
}
.box2 {
width:32%;
height:300px;
float:left;
}
.box2left {
width:65%;
height:600px;
float:left;
}
}
div {
border:solid 1px #E6E6E6;
position:relative;
}
ul li {
border:solid 1px #E6E6E6;
}
HTML
<div class="navlogo floatleft">
<img src="images/logo.png" />
</div>
<div class="floatleft">
<div class="nav_container">
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
<div class="floatright">
<div class="nav_container">
<ul>
<li>Profile</li>
<li>Sign out</li>
</ul>
</div>
</div>
</header>
<div style="clear:both;"></div>
Answering your second question first as the answer is shorter: use the :hover pseudo class.
EXAMPLE
li:hover a{color:#fff;}
More information on pseudo classes
To answer your first question, then; setting an element's display property to inline or inline-block will cause the white space surrounding it to be treated just like the space surrounding any other inline element.
You can workaround it in a number of ways
Remove all line breaks from within your list:
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
Use comments to hide the line breaks from the browser:
<ul><!--
--><li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 3</li><!--
--></ul>
Use CSS to set the font-size of the parent element to 0 and then "reset" it for the child elements:
html{font-size:20px;}
ul{font-size:0;}
li{font-size:1rem;}
Alternatively, if you're not 100% set on using display:inline-block, you can use floats or flexbox instead.
To change the color of the links to white, use this css:
.nav_container ul li:hover a {
color:white;
}
However, only the text will be clickable, the li element won't be clickable. Another way to do the same thing is to apply all width/height/background styling to the link, instead of the li.
As Shaggy mentioned, to eliminate extra spacing when using inline-block you should remove all spaces in your html between your menu li items.
As for changing the link color on hover you should add the following to your css code:
.nav_container li:hover a {
color:#FFF;
}
My final goal is to create what you see in image B. Note: the menu bar must be centered on the page. I did create B by setting the vertical-align on the image to middle. However, as a result of doing this my dropdown menu is slightly separated from the main header. Therefore, i cannot select the sub-menu items when i move my mouse cursor down. Any ideas on making this work ? Thanks Jillian
<style>
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
position:relative;
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
#nav ul{
position:absolute;
/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
left:-9999px;
margin:0;
padding:0;
text-align:left;
}
#nav ul li{
display:block;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
text-decoration:underline;
background:#f1f1f1;
}
#nav li:hover ul a{
text-decoration:none;
background:none;
}
#nav li:hover ul a:hover{
text-decoration:underline;
background:#f1f1f1;
}
#nav ul a{
white-space:nowrap;
display:block;
border-bottom:1px solid #ccc;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
background:#f1f1f1;
}
</style>
</head>
<body>
<ul id="nav">
<li>Item one</li>
<li>Item two
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li class="double-line">
<img style="vertical-align:middle" src="img/logo_large.png" alt="logo" /></li>
<li>The Fourth</li>
<li>Last</li>
</ul>
</body>
</html>
You do something like,
#nav ul{
background:url('img/logo_large.png') no-repeat center center;
/* more CSS here */
}
unless you have to use it as a link. Then consider position:absolute; for the image with #nav ul being position:relative;, and use a floating layout for the other links with a z-index to overlap where they should hang over.
You can just offset the submenu up to cover the logo height.
Here is a JSfiddle using the google logo and altering the submenu style by adding this:
#nav ul {
top: 20px;
}
Try to insert in CSS line-height: X px; (for example, parent div height) in each menu title (Item one, Item two, The Fourth, etc.)
I use the following HTML program for creating Horizontal menu bar with horizontal sub menu.It was working fine in Fire Fox and Chrome but it doesn't work in IE.So What are the changes are need changes in this program?
<html>
<head>
<style>
/* Targeting both first and second level menus */
#nav li {
list-style:none;
float: left;
position: relative;
}
#nav li a {
display: block;
padding: 8px 12px;
text-decoration: none;
}
#nav li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Targeting the first level menu */
#nav {
top:150px;
min-width:850px;
background:#fff;
opacity:0.5;
display: block;
height: 34px;
z-index: 100;
position: absolute;
}
#nav > li > a {
}
/* Targeting the second level menu */
#nav li ul {
color: #333;
display: none;
position: absolute;
width:850px;
}
#nav li ul li {
display: inline;
}
#nav li ul li a {
background: #fff;
border: none;
line-height: 34px;
margin: 0;
padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Third level menu */
#nav li ul li ul{
top: 0;
}
ul.child {
background-color:#FFF;
}
/* A class of current will be added via jQuery */
#nav li.current > a {
background: #f7f7f7;
float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
left:0;
top:34px;
display:inline;
position:absolute;
text-align:left;
}
#nav li:hover > ul.grandchild {
display:block;
}
</style>
</head>
<body>
<ul id="nav">
<li>Home</li>
<li>
Products
<ul class="child">
<li>Hard Drives</li>
<li>Monitors</li>
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
<li>Random Equipment</li>
</ul>
</li>
<li>
Services
<ul class="child">
<li>Repairs</li>
<li>Installations</li>
<li>Setups</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>
do you use modernizr? or have available classes for legacy IE browsers? You might want to try messing with separate styles and/or stylesheets for IE.
Or
You can switch your navigation from floated blocks to "inline" elements, which older browsers such as IE6 that don't work well with floats will recognize.
Or
If you want to stick with floats then make sure you are setting a "width" for any floated element.
Chris Coyier has a nice article on floats that contains a section labeled: "Problems with Floats"
http://css-tricks.com/all-about-floats/
Well for some reason I can't even get the fiddle site to work at all in IE8...? But one problem I noticed in your CSS, is opacity. IE8 doesn't support the opacity property. To change the opaqueness of elements in old IE, use filter:alpha(opacity=75); Note, the value 75 is a whole number from 1 to 100, not a decimal like with the opacity property. I wish I could be more help, but I can't even see what the problem is in the fiddle...