I have encountered a very interesting problem about img src which change on a:hover.
SCREENSHOT
As you see, hovering the <a> sector,you cant see logically the white img. So I had the same icons on black and white, I want on hovering the sectors of #menu, the img src changes img links to black icons, instead of white, which are for only non-hovered sectors.
CSS+HTML: http://paste.laravel.com/KJ1
ul li a{
background:#000000 url(/path/to/white/icon) left no-repeat;
background-color:black;
}
ul li a:hover{
background:#FFFFFF url(/path/to/black/icon) left no-repeat;
}
try this one
Please see this below example. it's shows how to change the background image of li on mouseover event.
change background image of li on an a:hover
Hope it help.
You could use background image sprites for this there is an article about sprites here: http://css-tricks.com/css-sprites/ this will also reduce server calls to get images as all images can be in a single file.
CSS Example:
ul li a{
background: #000000 url('sprite.png') no-repeat;
}
ul li a:hover{
background-color: #FFFFFF;
}
//then classes for each different link
ul li a.home {
//white icon
background-position: 0 0;
}
ul li a.home:hover {
//black icon
background-position: 0 -20px;
}
Related
I am making a navigation list, and I was wondering if there is a way to use the background property in CSS to place an image on both sides of the link when the user hovers over it. Here is what I currently have:
nav.vertical li a:hover {
background: #D4CD00 url(wnaderknight.png) right/25px 25px no-repeat;
color: black;
}
You may use multiple backgrounds or pseudos
.bg {
display:inline-block;
padding:30px;
background:url(http://www.icone-gif.com/icone/nature/terre/terre-32.png) right/25px 25px no-repeat,url(http://www.icone-gif.com/icone/nature/terre/terre-32.png) left/25px 25px no-repeat
}
.psdo:before,
.psdo:after {
vertical-align:middle;
display:inline-block;
content:url(http://www.icone-gif.com/icone/nature/terre/terre-32.png)
}
link with bg image on both sides <br/>
link with bg image on both sides
First question on Stack Overflow so if I am missing anything you need just ask and I'll do my best to provide it.
Basically I have a set of images that are acting as links to websites, when you hover over them there is an opacity effect (goes to 0.7). This is fine but when you hover and the opacity kicks in a grey box appears in the middle, I am assuming this is due to it being a link with an anchor tag.
My question is how do I get rid of that grey box? See below for images and code:
HTML for images
<div class="col-md-4 centered paddedBottom">
<p class="uppercase">Angela Macaulay Therapies</p>
<a href="http://angelamacaulaytherapies.uk" target="_blank">
<img src="images/angelamacaulaytherapies.png" /></a>
</div>
This is css for images
#our_work img {
width:400px;
height:400px;
display: inline-block;
height: auto;
max-width: 100%;
}
CSS for hover over images
#our_work img:hover {
opacity: 0.7;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
IMAGE BEFORE HOVER - http://i.stack.imgur.com/Yqx8N.png
IMAGE WITH HOVER AND GREY BOX - http://i.stack.imgur.com/VNDjD.png
Anything else you need to help let me know!
So as per my comment above in response to Webber, I found the cause of this (for me) was because when changing the colour of the navbar hover effect I was also targeting all anchor tags. This isn't usually noticeable but with the opacity effect this became visible. I changed my code to the following:
From:
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, a:hover {
background-color:grey !important;
}
To:
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, #main_nav a:hover {
background-color:grey !important;
}
I cannot get my hover or the other effects to work properly. What part of my code is incorrect?
CSS
#nav a {
display: block;
width: 180px;
height: 150px;
background-image: url(https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg);
background-repeat: no-repeat;
}
#nav a {
background: url ('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 0;
}
#nav a:hover {
background: url ('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 -39px;
}
#nav a:active {
background: url ('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 -83px;
}
HTML
<body>
<img src="https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg" />
</body>
your css is looking for an a tag inside of an id called nav but you dont have that in your html. Change it to
<div id="nav"><img src="https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg" /></nav>
also you are trying to change the background of a but you have an image tag inside of the a. You should make everything a background image
In your CSS, you're accessing the element inside another element with an ID of "nav"... but in your HTML, there is no #nav element. You have two options, the first being:
Change your CSS to remove all the #nav before the a's.
Change your HTML to something like this:
<div id="nav">
<img src="https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg" />
</div>
Also, as Hashem Qolami said, you should remove the white space between "url" and your opening parenthesee. On another note, make sure the url inside your parentheses is inside quotes as well.
You should remove the white space between url and the opening parentheses in url (...), as follows:
#nav a {background: url('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 0;}
#nav a:hover {background: url('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 -39px;}
#nav a:active {background: url('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 -83px;}
WORKING vs NOT WORKING.
Also as you've used #nav a selector, you should have a wrapper for the anchor tag with the id of nav as well. If there's not such a element in your real markup remove the #nav from the CSS selectors.
So here's how I'd do it, in its simplest form
http://jsfiddle.net/7wh9z/
Add your image paths as needed - I've used colours as an example, you can take them out if you need to.
a {background: url('') #ff0000; width:150px; height:45px; display: block}
a:hover {background: url('') #00ff00;}
a:active {background: url('') #0000ff;}
The fact you've got an image in there already means whatever is in your IMG tag will display above the background - So that will prevent you from seeing the background and hover effects, so you're best off taking that out.
Remember to give your links classes or ID's as what I've given you will affect all a tags.
I am trying to make a horizontal navigation menu , My menu items (li) elements are in shape of circle here is the demo , my question is the text of the link is appearing on top , how do I make it to appear on center , will that be possible , please let me know that , any suggestions are welcome.
Thanks
Only block items can use margins and padding. Anchor tags are inline elements. You need to force them to be block elements in your CSS:
#menu ul li a
{
text-decoration:none;
display:block;
padding:30px 0 0 0;
}
And if text flows over 2 lines, you can use this to keep it in the middle:
#menu ul li a
{
display:table-cell;
vertical-align:middle;
height:85px;
width:35px;
}
And the answer to your second question:
#menu ul li:hover
{
background:red;
}
To answer your second question posted in response to Diodeus:
If you want to use pure css3 hover effect, you'll want to do something similar to this by using the :hover selector:
#menu ul li a:hover {
background-color: #000000;
}
For nice effects, use the CSS3 transition property which you can see here:
http://www.w3schools.com/css3/css3_transitions.asp
Rather than messing with vertical align, set the line-height equal to the height/width of the circle.
Your issue with the red background not taking was that the specificity of the selector it was declared in: li:hover was not high enough to overcome the original bg color declaration in #menu ul li.
See here: http://jsfiddle.net/Az8cG/11/ for both fixes.
I just played with your fiddle. What i did is just made "li" display:inline-block & changed li:hover to #menu li:hover.
#menu ul li
{
float:left;
display:inline-block;
padding:40px 30px;
background-color:slategray;
margin:0 20px 0 0;
height:17px;
-webkit-border-radius:50px;
}
#menu li:hover
{
-webkit-box-shadow:0 0 50px 12px #69CDF5;
background:#cb2326;
}
Please check the fiddle here: http://jsfiddle.net/Az8cG/15/
I am working on this : Menu List
What I am trying to do is check with yourselves, If my approach is the right way. The site is running on Wordpress.
So ideally I'd like to get rid of the text "Our Services, About Us" etc.. But I'd also like the graphic to become a clickable anchor link.
Has anyone any ideas on the best way to approach this?
Thanks in advance.
Give image inside anchor. Write like this:
.menu-header ul li a{
display:block;
padding: 70px 55px;
text-indent:-9999px;
}
#access .menu-header ul li#menu-item-26 a{
background: url(http://i41.tinypic.com/345h0cw.png) no-repeat;
}
#access .menu-header ul li#menu-item-24 a{
background: url(http://i43.tinypic.com/15cikhs.jpg) no-repeat;
}
#access .menu-header ul li#menu-item-23 a{
background: url(http://i39.tinypic.com/dca82q.png) no-repeat;
}
Check this http://jsfiddle.net/FN6f5/2/
I would do this for removing the active link text. However i would suggest making each button image the same height so you can align them horizontally in a nice way. Widths can change but just adjust the css accordingly.
http://jsfiddle.net/FN6f5/3/