justlukeyou Posted April 2, 2011 Share Posted April 2, 2011 Hi, Does anyone know how to perform CSS background mouse over change? Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted April 2, 2011 Share Posted April 2, 2011 have a read on the (pseudo):hover class Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted April 2, 2011 Share Posted April 2, 2011 have a read on the (pseudo):hover class Because the sun is shining here is an example a { text-decoration:none; padding: 2px 5px; background:red; } a:hover{ /* on mouse over */ background:green; color:#fff; } Quote Link to comment Share on other sites More sharing options...
justlukeyou Posted April 2, 2011 Author Share Posted April 2, 2011 Cheers dude, do you know if there are any modern tutorials for doing this? How to I applt it to the HTML? Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted April 2, 2011 Share Posted April 2, 2011 Cheers dude, do you know if there are any modern tutorials for doing this? How to I applt it to the HTML? Tutorials almost always suck for learning these very basics, better buy a good book, it saves you time and money. Oreilly has mostly good books. The code i supplied is css, and targets anchor elements. Css is all about targeting elements by using selectors classes or id's and setting style to it. Css is at it's best in an external stylesheet but you could also use style tags or inline style I can explain it all here, but I think it's best if you buy a decent book, because it seems the whole concept of css not clear it seems. Just google, learn css or learn html or something, if you are not in to books. But trust me a book is the fastest way to learn this. Quote Link to comment Share on other sites More sharing options...
justlukeyou Posted April 2, 2011 Author Share Posted April 2, 2011 The frustrating thing is that I have done this before around 3 years ago and had it working fine but I just cant get it to work. How do I apply the anchor element to a div? Can I put the CSS in the div? That would work great. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted April 2, 2011 Share Posted April 2, 2011 trust me if you did this before you would have known. I repeat myself for the sake of starving monkeys in the himalaya. Css is all about targeting elements by using selectors classes or id's and setting style to the targeted element. clearly you have no idea how to target something from css, which is the first thing you learn. For instance if i want to target a <p> element with that hover effect i do: <style type="text/css"> p { /* Use an external stylesheet! */ padding: 2px 5px; background:red; } p:hover{ /* on mouse over OLDER BROWSERS MIGHT NOT LIKE THIS SO GOOGLE PSEUDO:HOVER CSS!!!! (oops caps) */ background:green; color:#fff; } </style> <body> <body> <p>some text inside a p element</p> </body> Now you can ask me again how to do this for a div, but since you did this before showing it to you twice must ring a bell other wise: google is your friend! Quote Link to comment Share on other sites More sharing options...
justlukeyou Posted April 3, 2011 Author Share Posted April 3, 2011 Hi, Can you quote me a price for doing, from what your saying it should only take ten minutes. I just need to get it done and out the way. To make it simple I want to put the same mouseover affect on different divs. Can I give you the example to code so it just styles the stylesheet? Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted April 3, 2011 Share Posted April 3, 2011 if you insist, pm me the file or link an online example. But really if you took a little time, it could save you. Quote Link to comment Share on other sites More sharing options...
justlukeyou Posted April 3, 2011 Author Share Posted April 3, 2011 Your right, I got to work is <p> as per your example but how do I get it to apply to a div. My Div is, I am trying to apply a mouseover affect to this: .headernavgrey{ float: left; padding-left: 10px; padding-right: 10px; padding-top: 20px; padding-bottom: 20px; background:#f4f4f4; font-family: Arial; font-size: 12px; } Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted April 3, 2011 Share Posted April 3, 2011 Your either just lazy, or haven't read any of the underlined things i said above. and did a search on them. (those were keywords to help you out) Have a read here: http://www.w3.org/TR/CSS2/selector.html#type-selectors we are not here to write code, if there is no effort shown Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.