How do i on a CSS hover change the styling of another element?
Ive got a Link which has this mouse over code:
a.home{background:url(home_out.gif) no-repeat; width:71px; height:14px; }
a.home:hover{background:url(home_over.gif) no-repeat; width:71px; height:14px; }
the Link:
<a class="home" href=http://www.webdeveloper.com/forum/archive/index.php/"hma_home.htm"></a>
Ive also got another element this time a Div,
that on mouse over of the Link id like to change
the div's position and display how do i do this?
the Div:
<div class="some_element" name="some_element">some text</a>
.some_element{
display: none;
position: absolute;
}
Also the div i only want to display on mouse over
so im guessing ill need code to hide it again
Thanks Chris.some_element{
display: none;
position: absolute;
}
.some_element:hover{
display: block;
position: absolute;
}
Although this is valid CSS, only a minority of your viewers will be able to see this as IE insits not to follow W3C recommendation's.
A "Widely Supported" alternative is to use an anchor instead:
/* CSS CODE */
a.some_element:link, a.some_element:visited{
display: none;
position: absolute;
}
a.some_element:hover{
display: block;
position: absolute;
}
<!-- HTML CODE -->
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="some_element">
Content's of DIV
</a>
However using an anchor in place of a div does limit you in design and also doesn't allow hyperlinks, etc.<a href=http://www.webdeveloper.com/forum/archive/index.php/"#nogo" onmouseover="document.getElementById('some_element').style.display = 'block';" onmouseout="document.getElementById('some_element').style.display = 'none';">Thanks for the replys, the idea was ive got a menu bar that had javascript mouse rollovers on the selection images,
So today i decided to change it to CSS roll overs instead. that was easy enough so then i thought about making my own "Alt" text boxes using div's for each menu selection that changed their display acording to hovers.then use title="", thats what its there for
Ive got a Link which has this mouse over code:
a.home{background:url(home_out.gif) no-repeat; width:71px; height:14px; }
a.home:hover{background:url(home_over.gif) no-repeat; width:71px; height:14px; }
the Link:
<a class="home" href=http://www.webdeveloper.com/forum/archive/index.php/"hma_home.htm"></a>
Ive also got another element this time a Div,
that on mouse over of the Link id like to change
the div's position and display how do i do this?
the Div:
<div class="some_element" name="some_element">some text</a>
.some_element{
display: none;
position: absolute;
}
Also the div i only want to display on mouse over
so im guessing ill need code to hide it again
Thanks Chris.some_element{
display: none;
position: absolute;
}
.some_element:hover{
display: block;
position: absolute;
}
Although this is valid CSS, only a minority of your viewers will be able to see this as IE insits not to follow W3C recommendation's.
A "Widely Supported" alternative is to use an anchor instead:
/* CSS CODE */
a.some_element:link, a.some_element:visited{
display: none;
position: absolute;
}
a.some_element:hover{
display: block;
position: absolute;
}
<!-- HTML CODE -->
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="some_element">
Content's of DIV
</a>
However using an anchor in place of a div does limit you in design and also doesn't allow hyperlinks, etc.<a href=http://www.webdeveloper.com/forum/archive/index.php/"#nogo" onmouseover="document.getElementById('some_element').style.display = 'block';" onmouseout="document.getElementById('some_element').style.display = 'none';">Thanks for the replys, the idea was ive got a menu bar that had javascript mouse rollovers on the selection images,
So today i decided to change it to CSS roll overs instead. that was easy enough so then i thought about making my own "Alt" text boxes using div's for each menu selection that changed their display acording to hovers.then use title="", thats what its there for