|
CSS - Change Style Onmouseover
Hey all,
I am having a little trouble with some stylesheet/javascript. I am trying to change the style on mouse over of another element. I have a DL with one DT & and one DD. I would like to be able to change the style of the DD on mouse over the entire DL. I'd like to change the class 'background' to 'backgroundOver'. The code: Code:
<dl>
<dt>
<p>Text</p>
</dt>
<dd class="background">
<p>Text</p>
</dd>
</dl>
Any help with this would be much appreciated. Cheers in advance. Similar TutorialsI have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! I'm trying to change text-color of a <h1> tag when the mouse hovers over it. I don't want to use the :hover css comand because I need this page to work in IE5. So I was thinking of using JavaScript and onMouseOver, but then I don't know how to change the color. Maybe if I somehow could change the style-sheet that the h1 uses, but I don't know how I would do that... So how do I change the color of a <h1> tag using onMouseOver? I am trying to find a script so that when you mouseover any element in a standard table the entire column background color will change. Doing this with individual cells and even row bg changes is easy, though I am having problems with entire column changes. Any help? hi all. is there a way to change the css border-color attribute of a table with onmouseover? so the table, where the mouse is on, is highlighted in a new color? thanks. j0sh On the title of my gallery one of the words has moved to the second row. There is obvious room before the text hits the search box so I'm hoping to have all the text on the same row. This is what I've found for the gallery title CSS: #gallerytitle { padding: 10px 10px 10px 20px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; background: #F8F8F8; height:30px; border-bottom: 1px solid #CCC; What would I change there (if that is indeed the part that needs to be changed) to get the desired effect? Here is the site where you can see the gallery title issue. EDIT: I guess I can't link to my site. Hmm. It's kind of hard to describe what my problem is. I appreciate any help i have a link which has some parenthesis within the anchor tags, now what i was wondering was whether i could change the style (colour to be exact) of the parenthesis without adding extra tags into the html. Thanks for any assisstance eg: Order By (DESC) to become Order By ( DESC ) Hi guys... Would u mind to see this site I'm working ... http://diario.coldfusion-vpm.com It is being done in Mambo (www.mamboserver.com) And i would like to know why it sees OK in Firefox but it sees bad in IE, specially left & middle colum, they see overlapped, very strange CSS file: http://diario.coldfusion-vpm.com/templates/maiputotal/css/template_css.css thanks a lot in advance Hi all, I need to link to a stylesheet and have it apply to the page instead of just opening the css. if thats a bit difficult to understand, lets say for example, for site accessibility, you would have links to 3 types of stylesheets to make the text bigger or smaller... how do you link to the css files without them actually opening the css file? thanks in advance Matty I have a header.inc file and a footer.inc file that is called to each new file that I create. The header.inc file holds all the javascripts as well as calls the css, etc. It also begins the body and the footer.inc file closes the body. In other words in each new file that I create I have a php statement calling the header, and at the bottom of the file another statement that calls the footer. So each new file is really only part of the body as the title and head are found in the header.inc file. What I would like to do is be able to change the background color of the body of a new file if I choose to do so. But obviously because each new file is only part of the body I cannot put a css style in the new file. Is there any way of writing a php statement that I can place in a new file that would allow me to change the background-color of let's say #faunabody for that particular page??. Hope this is clear...thanks alot on my site i have a few drop down boxes, ive used css to change the textboxes and submit buttons, but is there a way to change the arrows/buttons on a drop down list? i have a main page with an iframe.. my iframe contain most of my data.. there are 4 types of css for the user to choose.. i have create 4 css.. 1.css, 2.css, 3.css and 4.css... when they user clicks on the first link, the iframe will load 1.css.. if the user clicks on the 2nd link, the iframe will load 2.css.. what shld i do to attain that? I have an unordered list that I'm making into a navigation menu. It's all working except for the first item in the list. I don't think I've missed anything but let me post the code and get a 2nd opinion. Thanks in advance for the help: Code:
@charset "utf-8";
/* CSS Document */
#wrapper
{
width: 700px;
position: absolute;
top: 50px;
left: 150px;
margin: 0px 0px 0px 100px;
}
body
{
background-image: url(images/bg1.png);
background-repeat: repeat;
margin:0 0 0 0;
}
#banner
{
height: 125px;
width: auto;
background-image:url(images/banner.jpg);
background-repeat:no-repeat;
}
#content
{
width: 400px;
position: static;
background-color: #e8caa6;
font-size: 18px;
margin: 0px 318px 0px 0px; /* 318px right 125px for centered */
padding: 10px 5px 10px 5px;
border-style:solid;
border-color:#000;
border-width:10px;
}
#movietable
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#footer
{
padding: 0px 0px 0px 0px;
margin: 0px 50px 10px 50px;
text-align: center;
font-size: 14px;
}
#footer a
{
text-decoration: none;
color:#333;
font-weight:500;
}
#footer a:link
{
text-decoration:none;
}
#footer a:hover
{
text-decoration:none;
background:#d9d3c6;
}
#footer a:visit
{
text-decoration:none;
}
#nav ul
{
list-style: none;
width: 700px;
position: relative;
}
#nav span
{
display:inline;
}
#nav
{
height: 40px;
background-color: #8D5C22;
}
#nav li
{
float: left;
margin: 0 0.15em;
}
#nav li a
{
height: 40px;
line-height: 40px;
float: left;
width: 167px;
display: block;
/*border: 0.1em solid #dcdce9;*/
text-align: center;
}
a.home:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.home:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.home:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.home:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.restaurants:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.servicearea:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:link{ color: #FFF; text-decoration:none; font-size: 2.0em; font-weight: bold; }
a.contact:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
Html Code:
<body>
<div id="wrapper">
<div id="banner">
<!-- blah -->
</div>
<div id="nav">
<ul id="navblock">
<li id="nav1"><a href="index.html" class="home"><span>Home</span></a></li>
<li id="nav2"><a href="rest.html" class="restaurants"><span>Restaurants</span></a></li>
<li id="nav3"><a href="area.html" class="servicearea"><span>Coverage</span></a></li>
<li id="nav4"><a href="contact.html" class="contact"><span>Contact</span></a></li>
</ul>
</div><!-- End Nav -->
You can check the site live here . I have been trying various methods to change the color of the scrollbar of an object in my HTML page. However it remains at gray. The HTML code is as follows: <OBJECT NAME="foo" CLASSID="qeroeure" STYLE="scrollbar-base-color:red" CODEBASE="blah" WIDTH="700" HEIGHT="500" BORDER="3">"Cannot load image control." </OBJECT> This does not change the scrollbar color to red. What do I do to change the scrollbar color Hey all, i can't find out anywhere if i can use css to change the style of html menus and buttons...Id just like the menu to look a little different, ie different button and different colour background and text..etc any ideas or help would be appreciated thanks RF I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 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! I found some neat css code to display an image file to the user, but text to the search engines (which count more for internal linking when it comes to seo). The sample code I found uses an h3 tag and is as follows: Code:
<h3 id="header">
<span>Revised Image Replacement</span>
</h3>
/* css */
#header {
width: 329px;
height: 25px;
background-image: url(sample-opaque.gif);
}
#header span {
display: none;
}
(full explanation found at: http://www.mezzoblue.com/tests/revised-image-replacement/) I tried to do so on my site using anchor text, but can't get it to work. Nothing shows up at all Code:
<a href="Apply_Now_Surety_Bond.htm" id="blank_button"><span>Apply</span></a>
/* css */
#blank_button a{
width: 93px;
height: 52px;
background-image: url(apply.jpg);
}
#blank_button span {
display: none;
}
You can see that the "Apply" button does not appear at: www*bryantsuretybonds*com/new (it should be the first one on the left) This could be argued that it belongs in a JavaScript forum but I think the core of the problem lies in where the information should go so I shall post it here. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My site</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#base {
clear: both;
padding-top: 1px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
width: 100%;
background: #0f0f0f; } /* end #base */
#main_block {
background: #0000ff;
margin: auto;
text-align: left;
width: 955px; } /* end #main_block */
#main_content {
background: #ffffff;
border-left: 1px solid #0000ff;
border-right: 1px solid #0000ff; } /* end #main_content */
#top_main_content { padding-top: 1em; }
#top_main_content ul {
float: left;
list-style-type: none;
border-spacing: 0;
border: 0;
margin: 0;
padding: 0;
text-align: right;
border-top: 1px solid #ff0000;
height: 243px;
width: 266px; } /* end #top_main_content ul */
#top_main_content ul li {
color: #00ff00;
width: 266px;
border-bottom: 1px solid #ff0000; } /* end #top_main_content ul li */
#top_main_content ul li a {
line-height: 26px;
display: block;
color: #00ff00;
width: 266px; } /* end #top_main_content ul li a */
.indent { padding-right: 1.5em; }
#top_main_content ul li a:hover {
background: #cfcf00;
color: #000000; } /* end #top_main_content ul li a:hover */
#top_main_content #rotating {
z-index: 0;
float: right;
width: 687px;
height: 242px;
border-bottom: 1px solid #ff0000;
border-top: 1px solid #ff0000; } /* end #top_main_content #rotating */
#default {
position: absolute;
visibility: visible; } /* end #default */
#a {
position: absolute;
visibility: hidden; } /* end #a */
#b {
position: absolute;
visibility: hidden; } /* end #b */
#c {
position: absolute;
visibility: hidden; } /* end #c */
#d {
position: absolute;
visibility: hidden; } /* end #d */
#e {
position: absolute;
visibility: hidden; } /* end #e */
#f {
position: absolute;
visibility: hidden; } /* end #f */
#g {
position: absolute;
visibility: hidden; } /* end #g */
#h {
position: absolute;
visibility: hidden; } /* end #h */
#i {
position: absolute;
visibility: hidden; } /* end #i */
</style>
<script language="javascript">
function change_graphic(to_visible) {
var num_elements = 10;
var elements = new Array(num_elements);
var i = 0;
elements[i++] = "default";
elements[i++] = "a";
elements[i++] = "b";
elements[i++] = "c";
elements[i++] = "d";
elements[i++] = "e";
elements[i++] = "f";
elements[i++] = "g";
elements[i++] = "h";
elements[i++] = "i";
var temp = "";
for(i = 0; i < num_elements; i++) {
document.getElementById(elements[i]).style.visibility = "hidden"; }
document.getElementById(to_visible).style.visibility = "visible"; } // end function change_graphic(path)
</script>
</head>
<body>
<div id="base">
<div id="main_block">
<div id="main_content">
<div id="top_main_content" onmouseout="change_graphic('default');">
<ul>
<li onmouseover="change_graphic('a');"><a href="#"><span class="indent">Link A</span></a></li>
<li onmouseover="change_graphic('b');"><a href="#"><span class="indent">Link B</span></a></li>
<li onmouseover="change_graphic('c');"><a href="#"><span class="indent">Link C</span></a></li>
<li onmouseover="change_graphic('d');"><a href="#"><span class="indent">Link D</span></a></li>
<li onmouseover="change_graphic('e');"><a href="#"><span class="indent">Link E</span></a></li>
<li onmouseover="change_graphic('f');"><a href="#"><span class="indent">Link F</span></a></li>
<li onmouseover="change_graphic('g');"><a href="#"><span class="indent">Link G</span></a></li>
<li onmouseover="change_graphic('h');"><a href="#"><span class="indent">Link H</span></a></li>
<li onmouseover="change_graphic('i');"><a href="#"><span class="indent">Link I</span></a></li>
</ul>
<div id="rotating">
<div id="default"><img src="images/default.gif" alt="" /></div>
<div id="a"><img src="images/test_image_a.gif" alt="" /></div>
<div id="b"><img src="images/test_image_b.gif" alt="" /></div>
<div id="c"><img src="images/test_image_c.gif" alt="" /></div>
<div id="d"><img src="images/test_image_d.gif" alt="" /></div>
<div id="e"><img src="images/test_image_e.gif" alt="" /></div>
<div id="f"><img src="images/test_image_f.gif" alt="" /></div>
<div id="g"><img src="images/test_image_g.gif" alt="" /></div>
<div id="h"><img src="images/test_image_h.gif" alt="" /></div>
<div id="i"><img src="images/test_image_i.gif" alt="" /></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
What I have is a set of links that when hovered will change the contents of the rotating div to reflect information about that particular link. As the code stands now, whenever any other item is moused over, the div will reset to the default div. What I would like to happen is whenever the top_content div is mousedoff (new word?), the content resets to the default. Thus I should be able to hover over a link, change the content of the rotating div, and move from that link directly to the content and mouse around over there all I want without changing back to the default div. To me, what I have should work in that I am thinking of nested divs as a parent/child relationship but that is obviously not how the browser is interpreting it. Any ideas on how I can achieve this? The JavaScript portion has been tested and works correctly. Edited: This code also pushes the side menu into the border in Opera. This problem was addressed and fixed in a previous thread but I broke it again. hello, I did search the forum for this but it may be unique, I am using css onmouseover effect to change the background image of my menu from one image to the other to ceate the lighted effect. I am also using text display over these images. The text also "lights-up" with the hover effect. the problem i have though is I would like the text part to "light-up" with the image when the cursor is over the image.... not like it is now with the image lighting up before the text. see URL for details. I realize I could just use an image entirly, but since my menu is generated by php, this is not an option. Edit I did find one source for getByID, but i cannot seem to make it work.... help is appreciated. Thanks in advance, I am about to go insane.. I am a total newbie to DHTML and Javascript and I am trying to do a onmouseover event to make an image display normally as a grayscale version of itself (with filter:gray) and when the mouse moves over it I want it to switch to the full RGB color version. I tried to do a rollover with two seperate versions of the image and it worked, but for some reason IE 6 wants to load the image from the server again everytime I onmouseover or onmouseout. This is very slow, especially on my server. I just want to change the image with DHTML filters.. General pseudocode: <img src="blah.jpg" style="filter:gray" onMouseOver="style='filter:none'" onMouseOut="style='filter:gray'"> Can anybody help me? PLEASE???!?!? |
|||||||