|
CSS - Background And Link Both Need To Change
Trying to get my td backgrounds and my links to change colors when you roll over into the td. However only both change when you roll over the link within the td.
If you roll over just the td, it changes, but I need both the link color and the bg color to change when you roll over the td. Here's what I'm going for, the category set up I mean: http://www.colemancampingstore.com/link-hiking.html Here's my CSS etc. PHP Code: td:hover.cats { background-color: #446644; color:white; } a:link.catlink { font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #000; text-decoration: underline; } a:visited.catlink { font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-decoration: underline; color: #000; } a:hover.catlink { font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-decoration: none; } a:active.catlink { font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #000; text-decoration: underline; } echo "<td class='cats' ><center>"; echo "<b><a href='links.php?cat=".$myrow['cat']."' class='catlink'>".$myrow['cat']." </a></b><br>"; echo "</center></td>"; } Is there a way to achieve this effect without using javascript and junk? Similar TutorialsI'm trying to create a hover effect that changes the background color behind a link, but instead of ending with the text, the color change extends to the width of the div. It's hard to explain, so here's an example: checkout the sidebar at pastemagazine.com. I've tried dissecting their source code, but they have about 5 different stylesheets and it's really hard to follow. As far as I can tell, this is what makes the hover effect and I just can't figure out how they make the background color change extend beyond the text. I have my links in a ul just as they do and they don't seem to be doing anything else special. Code: #sect1 ul.stories a:hover{
background-color:#d9f7ff;
color: #71808F;
}
Thanks! cae 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 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. 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(!) 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! Please let me apologise if this this the dumbest question ever but I know almost nothing about CSS. I want to make the white section of my page, the text area, wider but I have no clue how to do it, (a friend did the page originally and she is no longer around). And if I do extend the white section can I just add more to the header image to make that fit the new text area? Thank you I am using a Wordpress template called Arthemia Premium. I want to change the background color in the headline section, but nothing "sticks" when I change the hex color codes in the style.css. Tell me what to post here and I will. Thanks BTW I have very basic knowledge of CSS I am a chef by trade, but am re-doing my website for a better online experience for my clients. I want to keep my same css coding, but for the life of me, I cannot change the active menu page to a different background to show the current active page...please help and thanks! Cheers ~Kat Menu bar at: (cater-express dot com) Guys, Im new to UI design, pls help... This is a part of my code - Code: <div class="yellow"><a href="#">test link 1</a></div> <div class="yellow"><a href="#">test link 2</a></div> <div class="yellow"><a href="#">test link 3</a></div> Now when i click on a link, the css class "Yellow" should be changed to class "Red" - (the div has yellow css class by default, when a link is clicked the css class for the div should be changed). And when the link on the second div is clicked, the first div should go to its default class (yellow) and second div (the one clicked) should change its class from yellow to red. Please Help. Thanks. Hi all, I have a design shown on my website he http://janusz.co.uk/dudley%2Dbeacon/ I have a horizontal navigation towards the top. Here are my queries: I would ideally want this to be CSS based and not in the table as it is now. Furthermore, I want it to be cross browser friendly! I achieved half of this but there seems to be a minor yet annoying difference in the way netscape, firefox, avant and I.E. all render paddings! There are 8 boxes so ideally they should all be equally stretched across the page. I would also want the background colour to change. OR Use the current setup but have the background change when the user hovers over the link. I would like the background colour of the cell to change. However.... I don't want to use javascript to do this, is this possible at all just using CSS? Please help!!! Thanks! Janusz I have a list of things, and i would like it to change the entire background of the item scrolled over... I don't want it to be a link, just change the background of the div when it is scrolled over. 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 Using transparent gif text. It is linked On mouse over, there is a white background with an opacity of 50%, can I do this with only CSS or will I need to use javascript? How do I do this? I've figured out the opaque text on 50% opaque white background. hey guys, this has been bothering me for several days and really don't think theres a solution to it, but I might as well post it up to see if anyone else has a similar problem. the problem is when using CSS to change background colors on rollover, it is being slow in IE, but works perfectly fine in firefox. this, however, only happens when I have an extra div beneath the rollovers. i can't really explain it well, so I will show you what i mean. on the following page of a website I am developing you there are rollover effects on the right hand side for 'galleries' 'site statistics' and even the div below that. the link is: http://rollinlow54.com/galleries/ now, in firefox, the background change is instant, no lag whatsoever. in IE, there is a good bit of lag, driving me crazy. so i played around with it forever, and realized that the only way to prevent IE from lagging is to remove the div with 'popular galleries'. so i did that he http://rollinlow54.com/fixme.php Here is the CSS for the code in the first page: Code: #links a
{
margin-left: 8px;
margin-right: 8px;
margin-bottom: 0px;
margin-top: 4px;
padding: 3px;
text-decoration: none;
width: 170px;
float: left;
background-color: #3A628A;
color: white;
font-family: arial, verdana, sans serif;
font-size: 11px;
}
#links a:hover
{
text-decoration: none;
background: #0A2F54;
}
that controls the 'galleries' 'site statistics' and other main links, and there are similar controls for the 'popular galleries' div beneath that. here is the HTML: Code: <div id="links">
<a href="http://rollinlow54.com/">galleries (18)</a>
<a href="http://rollinlow54.com/">site statistics</a>
<a href="http://rollinlow54.com/">download my resume (pdf)</a>
<a href="http://rollinlow54.com/">contact information</a>
<a href="http://rollinlow54.com/">visit company site</a>
</div>
there are similar HTML controls for the 'popular galleries' links as well. is there anyway around this?? 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 Hi, I have 5 input textbox in my page. I want to change the background color of one input textbox to red. How to change the color of the input box to red? Thank you i have been using the website tonight program on godaddy.COM i would like to change the background to a personal picture i have. when i called they told me they had no idea how to do it but it might have something to do with the css and to view the advanced css option here is what i found : Code: /*----------------------------------
Theme411_Clean_Slate
Cat Generic
----------------------------------*/
body {
font-family: "Times New Roman", Times, FreeSerif, serif;
}
.sf_outer_wrapper {
}
.sf_extra1 {
}
.sf_wrapper {
}
/*--------------------------------
Top Navigation
---------------------------------*/
.sf_navigation_top {
display: none;
}
.sf_navigation_top ul{
}
.sf_navigation_top ul:after{
}
.sf_navigation_top ul li {
}
.sf_navigation_top ul li.sf_last_nav_item{
}
.sf_navigation_top ul li.sf_first_nav_item{
}
.sf_navigation_top ul li a {
}
.sf_navigation_top ul li a:visited {
}
.sf_navigation_top ul li a:hover {
}
/*--------------------------------
End Top Navigation
---------------------------------*/
.sf_extra10 {
}
/*--------------------------------
Header
---------------------------------*/
.sf_header_wrapper {
}
.sf_extra2 {
}
.sf_main_header {
}
.sf_extra3 {
}
.sf_sub_header {
}
/*--------------------------
End Header
--------------------------*/
.sf_extra4 {
}
/*--------------------------------
Bottom Navigation
---------------------------------*/
/**
* @section navigation
*/
.sf_navigation {
padding:0;
margin: 0;
}
.sf_navigation ul {
height: auto !important;
height: 9%;
list-style-type:disc;
margin:0;
padding:0 0 0 30px;
width: 900px;
}
.sf_navigation ul li {
margin:5;
padding:0;
width:200px;
}
.sf_navigation ul li a {
display:block;
margin: 0;
padding:0;
text-decoration: none;
width:175px;
}
.sf_navigation ul li a:hover {
text-decoration:underline;
}
/**
* @section subnav
*/
.sf_navigation ul.subnav {
background:#ffffff;
left: -999em;
list-style-type:none;
margin:-1.12em 0 0 160px;
padding:0;
position: absolute;
float: left;
width: 170px;
z-index:1000;
}
.sf_navigation ul.subnav li {
float: left;
width: 170px;
margin:0;
padding:3;
}
.sf_navigation ul.subnav li a {
width: 170px;
display: block;
padding:2px 0;
margin: 2;
background-image:none;
}
.sf_navigation ul.subnav li a {
text-decoration:none;
}
.sf_navigation ul.subnav li a:hover {
background:#f1f1f1;
text-decoration:underline;
}
#Nav1 li:hover ul,
#Nav1 li.sfhover ul {
left: auto;
}
#Nav1 iframe {
position: absolute;
left: 4;
top: 3;
z-index: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}
#Nav1 li:hover, #Nav1 li.hover {
position: static;
}
/*--------------------------------
End Bottom Navigation
---------------------------------*/
.sf_extra5 {
clear:none !important;
clear:left;
}
/*--------------------------------
Page Title
---------------------------------*/
.sf_pagetitle {
color: 000000 ;
}
/*--------------------------------
End Page Title
---------------------------------*/
.sf_extra6 {
}
.sf_extra11 {
}
/*--------------------------
Content
--------------------------*/
.sf_content {
}
.sf_content img {
}
/*--------------------------
End Content
--------------------------*/
.sf_extra12 {
}
.sf_extra7 {
}
/*--------------------------
Footer
--------------------------*/
.sf_footer {
clear: both;
}
/*--------------------------
End Footer
--------------------------*/
.sf_extra8 {
}
.sf_extra9 {
}
/*--------------------------
Extra Stuff
--------------------------*/
a:link {
}
a:visited {
}
a:hover {
}
.sf_banner {
margin: 40px auto 0 auto;
text-align: center;
}
.sf_banner a{
}
/**
* Sticking flyout menu bug
*
* @bugfix
* @affected ie7
* @css-for ie7
* @valid yes
*/
#Nav1 li:hover, #Nav1 li.hover {
position: static;
}
PLEASE HELP ME WHAT DO I DO TO CHANGE MY BACKGROUND TO A PERSONAL PICTURE I HAVE Hi All I wonder if someone can help me, I would like to change background and foreground colour of two <td>'s that are in One <tr> . This is the tricky part, I want it so that when I Hover on <tr> one <td>'s Foreground colour is changed and other <td>'s Background colour. To me that seem impossible in css alone and if that is not the case can someone please enlighten me. Thanks 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 |
|||||||