Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Hover and border question

Status
Not open for further replies.
fluxdemon

fluxdemon

MIS
Nov 5, 2002
89
US
Is there a way to pre-allocate the space needed for a border for a:hover so the text doesn't move when the cursor is over it? My next question requires the page listed below. The darker gray span doesn't change with the rest of the hyperlink, is there a way for the whole byperlink to change?

code below:
<html>

<style>
<!--

#contextMenu
{
width: 200px;
position: absolute;
background-color: #cfcfcf;
border: 2px outset white;
padding: 0px;
}

#vertBorder
{
width: 30px;
height: 100%;
background-color: #b1b1b1;
z-index: 1
}

span.menuPic
{
position: absolute;
z-index: 99;
left: +10px;
margin-top: 5px;
}

a
{
width: 100%;
color: black;
text-decoration: none;
z-index: 1;
}

a:hover
{
background-color: #efefef;
width: 100%;
text-decoration: none;
border: solid #000000 1px;
z-index: 1;
}

-->
</style>

<body>
<span id=&quot;contextMenu&quot;>

<a href=&quot; <span id=&quot;vertBorder&quot;></span>
<span class=&quot;menuPic&quot;><img width=&quot;10&quot; height=&quot;10&quot; border=&quot;0&quot;></span>
<span> One</span>
</a>
<a href=&quot; <span id=&quot;vertBorder&quot;></span>
<span class=&quot;menuPic&quot;><img width=&quot;10&quot; height=&quot;10&quot; border=&quot;0&quot;></span>
<span> Two</span>
</a>
<a href=&quot; <span id=&quot;vertBorder&quot;></span>
<span class=&quot;menuPic&quot;><img width=&quot;10&quot; height=&quot;10&quot; border=&quot;0&quot;></span>
<span> Three</span>
</a>
<a href=&quot; <span id=&quot;vertBorder&quot;></span>
<span class=&quot;menuPic&quot;><img width=&quot;10&quot; height=&quot;10&quot; border=&quot;0&quot;></span>
<span> Four</span>
</a>

</span>
</body>
</html>
 
Sort by date Sort by votes
hmmm...

well, you can pre allocate the border space by adding an identicle border in the A style with the border color set to the background color, but then your background color changes, so you would have funny lines.

I think I would go about the whole thing differently. Give me a few minutes.
I'll come up with something.


Travis Hawkins
BeachBum Software
travis@cfm2asp.com
 
Upvote 0 Downvote
OK... how about mouseOver:

Code: 
<html>
<style>
<!--
#contextMenu
{
    width: 200px;
    position: absolute;
    background-color: #cfcfcf;
    border: 2px outset white;
    padding: 0px;
}

.vertBorder
{
    width: 30px;
    height: 100%;
    background-color: #b1b1b1;
    z-index: 1
}

span.menuPic
{
    position: absolute;
    z-index: 99;
    left: +10px;
    margin-top: 5px;
}

a
{
    width: 100%;
    color: black;
    text-decoration: none;
    z-index: 1;
	border: solid #cfcfcf 1px;
}

a:hover
{
    background-color: #efefef;
    width: 100%;
    text-decoration: none;
    border: solid #000000 1px;
    z-index: 1;
}

-->
</style>
<script>
function setBGcolor(idd,cl)
{
  document.getElementById(idd).style.backgroundColor = cl;
}
</script>
<body>
<span id=&quot;contextMenu&quot;>

    <a href=&quot;[URL unfurl="true"]http://one.net&quot;[/URL] onMouseOver=&quot;setBGcolor('vbOne','#efefef')&quot; onMouseOut=&quot;setBGcolor('vbOne','#b1b1b1');&quot;>
        <span id=&quot;vbOne&quot; class=&quot;vertBorder&quot;></span>
        <span class=&quot;menuPic&quot;><img width=&quot;10&quot; height=&quot;10&quot; border=&quot;0&quot;></span>
        <span> One</span>
    </a>
    <a href=&quot;[URL unfurl="true"]http://two.net&quot;[/URL] onMouseOver=&quot;setBGcolor('vbTwo','#efefef')&quot; onMouseOut=&quot;setBGcolor('vbTwo','#b1b1b1');&quot;>
        <span id=&quot;vbTwo&quot; class=&quot;vertBorder&quot;></span>
        <span class=&quot;menuPic&quot;><img width=&quot;10&quot; height=&quot;10&quot; border=&quot;0&quot;></span>
        <span> Two</span>
    </a>
    <a href=&quot;[URL unfurl="true"]http://three.net&quot;[/URL] onMouseOver=&quot;setBGcolor('vbThree','#efefef')&quot; onMouseOut=&quot;setBGcolor('vbThree','#b1b1b1');&quot;>
        <span id=&quot;vbThree&quot; class=&quot;vertBorder&quot;></span>
        <span class=&quot;menuPic&quot;><img width=&quot;10&quot; height=&quot;10&quot; border=&quot;0&quot;></span>
        <span> Three</span>
    </a>
    <a href=&quot;[URL unfurl="true"]http://four.net&quot;[/URL] onMouseOver=&quot;setBGcolor('vbFour','#efefef')&quot; onMouseOut=&quot;setBGcolor('vbFour','#b1b1b1');&quot;>
        <span id=&quot;vbFour&quot; class=&quot;vertBorder&quot;></span>
        <span class=&quot;menuPic&quot;><img width=&quot;10&quot; height=&quot;10&quot; border=&quot;0&quot;></span>
        <span> Four</span>
    </a>
</span>
</body>
</html>

it holds still... It changes background color... But it has stripes in the dark background. I'll let you know if I think of a way to get rid of them.


Travis Hawkins
BeachBum Software
travis@cfm2asp.com
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
1K
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
364
lmcate
lmcate
waubain
  • Locked
  • Question
3 state slider toggle switch - move slider to state when hover
Replies
0
Views
361
waubain
waubain
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
492
jjgupta915
jjgupta915

Part and Inventory Search

Sponsor

Back
Top