|
CSS - Background Image Hover Change And Click Change
I have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help!
Similar TutorialsHi guys, Is it possible in CSS to change the colour / image of the page background dynamically. So that as you hovered over different links , the background of the page changed. I know you can do this in JS but how would you do it in CSS? I was kinda thinking something like: a.linkname:hover, a.linkname:focus body { background-color:#00FF00; } but thats just a guess and doesnt work lol. Many Thanks, Alvin. Hi All, Anyone know of a way to change acheive this behaviour? I want to have several links in LI and when one hovers over the LI, the background of the whole UL changes (not just the background of the list item itself). Thanks in advance for any pointers. Cheers, :)Ben I have these two areas. Code:
.MenuItem {
color:#FFFFFF;
font-size:12px;
background-color:#CC0000;
font-weight:bold;
height:18px;
padding-top:5px;
padding-bottom:5px;
border-top:0px solid #FF0000;
border-left:2px solid #FF0000;
border-bottom:2px solid #FF0000;
border-right:2px solid #FF0000;
}
.MenuItemTop {
color:#FFFFFF;
font-size:12px;
background-color:#CC0000;
font-weight:bold;
height:18px;
padding-top:5px;
padding-bottom:5px;
border-top:2px solid #FF0000;
border-left:2px solid #FF0000;
border-bottom:2px solid #FF0000;
border-right:2px solid #FF0000;
}
which refer to the left nav. My code only changes the color behind the text, not the entire area (box) behind the text. Code:
.MenuItemTop a:hover, .MenuItem a:hover {
color:#FFFFFF;
text-decoration:underline;
font-size:12px;
background-color:#000000;
}
Any ideas why? example at : http://www.pierced.ca/FeedProductionRecordsHelp.htm Brad Thanks for taking the time to read my question. I have a <li> that has a background-color and border. I would like it to become transparent when the user hovers over it. In my a:hover I have background-color: transparent; but that is not working. Any ideas? Thanks, Brad Nevermind, fixed. Changed Pixels into Percentages. Delete thread. I've been using CSS for a couple of days now, and am a bit stuck on how to change the main background image in the body when I hover over a menu item on the side bar. Changing the menu item background seemed easy enough. But, I suspect I am missing a key piece on how to get access to a body style from inside a list style. Here is the short section I am working on, with the full CSS file shown below that. This validates with a couple of warnings about my black on black color selection. I would certainly appreciate any help with this. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>HOTWORKS</title> <link rel="stylesheet" href="stylz.css" type="text/css"> </head> <body class="top" id="bdy" > <!-- Site navigation menu --> <ul class="navbar" id="navlist"> <li><a href="tools.html"><br>Tools</a> <li><a href="glass.html"><br>Glass <br> Artwork</a> <li><a href="pottery.html"><br>Ceramic<br> Artwork</a> <li><a href="about.html"><br>About</a> </ul> <!-- Main content --> <h1> </h1> <p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> TOOLS - ART - MISCELLANEA <br> <address> </address> </body> </html> Code: #navlist a:hover {
color: #1e5ebd;
background:url("images/drawer4b.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
color:#FF0000;
/* how do I do something like this
body.top { background-image: url(images/tabtool.jpg) ; }
*/
}
Just to be complete, and in case there is something in here that you might need, here is the full css file: Code:
body.top {
padding-left: 11em;
font-family: Fantasy, "Times New Roman", Times, serif;
font-size:15px;
color: #000000;
/*background-image: url(images/tab3.jpg) ; */
background-position: 210px 10px;
background-repeat:no-repeat;
background-color: #000000;
margin-left:5cm;
}
body.top { background-image: url(images/tab3.jpg) ; }
ul.navbar {
color: #000000;
list-style-type: none;
position: absolute;
display:block;
float:left;
left: 1em;
}
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif
}
ul.navbar li {
text-align:center;
/* vertical-align:100px; */
background: #000000;
border-right: 1em solid black;
}
ul.navbar a {
text-decoration: none ;
top:10%;
height:4em;
}
a:link {
color: white }
a:visited {
color: white }
#navlist {
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
font-weight:bold;
list-style:none;
}
#navlist a {
display:block;
width:144px;
height:137px;
color:#fff;
text-decoration:none;
background:url("images/drawer4.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
}
#navlist a:hover {
color: #1e5ebd;
background:url("images/drawer4b.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
color:#FF0000;
/* how do I do something like this
body.top { background-image: url(images/tabtool.jpg) ; }
*/
}
#navlist a:active {
background:url("images/drawer4b.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
color:#FFC741;
}
I would like the link colour to change and the background of the <li> to change as well. I can't figure out what CSS to use for it though. I have made bold and underlined the li I want to change on hover. Code: <li id="menuitem_2mainnav"> <a id="menulink_2mainnav" class="mainlevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=2">Meetings</a> <ul id="menulist_2mainnav"> <li id="menuitem_2_1mainnav"><a id="menulink_2_1mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=14">TEST 1</a></li> <li id="menuitem_2_2mainnav"><a id="menulink_2_2mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=15">TEST 2</a></li> <li id="menuitem_2_3mainnav"><a id="menulink_2_3mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=16">TEST 3</a></li> <li id="menuitem_2_4mainnav"><a id="menulink_2_4mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=17">TEST 4</a></li> </ul> </li> I have tried: Code: #menulist_2mainnav li:hover{ color:#000000 !important; }
But it doesn't change the links text colour. I'm still relatively new to this whole homepage thing. I was wondering if its possible using only CSS to make this happen: i have a bunch of headings along the top of a page that a person can click on. Below is a box with an image. I would like a different image to appear in that box when a differnt heading above is hovered over. Is this javascript stuff ?:S (havnt started learning that yet) tanks, matt. Hi everyone, I'm looking for a solution that I thought (hoped) would be simple. ...but of course is not. I use sprites for rollover effects so the hover attribute just changes the background image position. Everything works cool with the rollovers. What I would like to do, is make a text link that when rolled over will change a separate background image to it's hover state. I should add, that the the rollover image has it's own div and is separate from where the text link is located. To get a visual you can check the website (just remove the *) *onholdmusicsource*.com In the body section I would like to make each of the dark red section titles a link that when rolled over will change the hover state of the corresponding "more" button. Comments would be fine Ideas would be great Solutions would be fantastic Many Thanks- Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) Hi. I have just recently begun working with CSS. Is it possible with CSS (and without the use of any JavaScript) to have the background image change on a link mouseover? I have the first image below (blue.jpg) set as my default background image and would like the second image (blue1.jpg) to display when the user hovers over a particular link. URL URL Thanks for any help anyone can offer On my site I have a list of links on the left side. I keep them in an unordered list, and set the background image using css. I want to change the image on rollover. In Firefox I can just change it putting by :hover after an li in the style sheet as if it were an anchor, but IE won't accept that, and for some reason I can't get the style to change using javascript either. Any help appreciated- I know it's something really simple that I'm just not seeing. IE also won't display the hand cursor, but if I figure out how to get the image to change I can do the hand on my own at the same time. Firefox does everything right, so you can use that to see what i'm going for. Right, Ive seen this before, but I think in javascript. Lets say i have a 400x400 box on my page and I have a menu of 3 points. I want to change the box's content based on which menu item is hovered over. Ive seen this in CSS with photo galleries, but its to complex for me to break apart and adapt to what I need it for. I need the menu to be on the right side of the box as well. Thanks for any help or links. Ok I have a html page with 6 navigation buttons on pressing a navigation button it changes a iframe but what I want to do is have a differant colour for each iframe whick is no problem but can I add some code to the buttons to change the CSS of the main html page? Or does anyone have any idea how I can achieve this Regards Kev How do i change img button to 3d on hover or mouseover using css. Please advise. thanks Hello, I'm trying to make "tool-tip text" that I can position and style when a user rolls over a link. I have an id called menuTipsAppointments that I want to keep hidden until the user rolls over my Appointments anchor. I'm starting with: Code: #menuTipsAppointments {
display: none;
}
Then I do this: Code: a#appointments:hover {
display:block;
width: 30px;
height: 61px;
background-image: url(images/pin-over.png);
background-repeat: no-repeat;
background-position: top left;
#menuTipsAppointments display: block;
}
The extra bits in this block (above the menuTipsAppointments id) are related to the link's FIR. If my syntax is okay, I'm guessing that I can't do this with :hover, and am hoping for another way to go about it. This is my first site and is already quite messy, so whatever works is cool. Many thanks! Hi. I am having dificulty getting a menu item to change colour and background colour when mouse over http://www.des-otoole.co.uk/HC2010/holidayclub.php any reason as it is at the end of the style sheet code Code:
#tabnav a:hover
{
background: #bfbfbf;
color: #f05320;
}
Thanks for taking the time to read my question. I have a container in which I have a link. I would like to change the color of the container when the user hovers over the link. Can I do that? I can make the background of the text change, but the container is wider than the text. HTML: Code: <div id="LinkBox" class="LB1"><a class="LinkBoxLink" href="#">Link #1</a></div> CSS: Code: #LinkBox {
float: right;
height: 20px;
margin-bottom: 15px;
border-color: gainsboro;
border-width: 1px;
border-style: solid;
text-align: center;
}
.LB1 {
width: 241px;
}
a.LinkBoxLink:link {
text-decoration: none;
color: black;
}
a.LinkBoxLink:visited {
text-decoration: none;
color: black;
}
a.LinkBoxLink:hover {
background-color: red;
color: yellow;
}
a.LinkBoxLink:active {
text-decoration: none;
}
Thanks again for your help. Brad I have a block that im trying to change the colour of when a user moves their mouse over it, but it isnt a link. At the moment its a div and the css for the block is simply: .postbitleft { background-color: #0B198C; } (aside from the size attributions which are already defined. What do i need to add to that CSS for it to change colour when someone hovers over it? Can i actually use CSS for that or will i have to use javascript? Regards, James Hi, I just want to change the color when I mouseover an href without a style sheet. This does not work: <a href="test.html" style="a:hover { color: #DA8525; }">Test</a> Is that suppose to work? |
|||||||