stackoom
  简体   繁体   中英

disjointed clickable text rollover

 原文  2012-09-09 16:45:26  3   2    css/ rollover/ clickable/ text-based

Question

I have text-based navigation. Rolling over "contact" displays the address (layer) over all the other menu buttons. I would like the email address and the phone number to be rollovers (changing color from grey to red) and as well clickable links. Problem: roll-out makes the address disappear, which is intended but it's impossible to click address/phone links. Would it work if the roll-out effect (disappearing) would be delayed? Is there a CSS only solution?

Here's the page: raphaelzwyer.com/testRapha/rollover_test.html 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>raphaelzwyer</title>
<style type="text/css">
  * {
    margin: 0;
    padding: 0;
    border: none;}
@font-face {
    font-family: 'BotonReg';
    src: url('fonts/BotonReg.eot');
    src: url('fonts/BotonReg.eot?#iefix') format('embedded-opentype'),
    url('fonts/BotonReg.woff') format('woff'),
    url('fonts/BotonReg.ttf') format('truetype'),
    url('fonts/BotonReg.svg#BotonReg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-variant: normal;} 
@font-face {
    font-family: 'BotonMed';
    src: url('fonts/BotonMed.eot');
    src: url('fonts/BotonMed.eot?#iefix') format('embedded-opentype'),
    url('fonts/BotonMed.woff') format('woff'),
    url('fonts/BotonMed.ttf') format('truetype'),
    url('fonts/BotonMed.svg#BotonMed') format('svg');
    font-weight: normal;
    font-style: normal;
    font-variant: normal;}
html, body {
    background-color: #FFFFFF;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
    color: #a9a9a9;
    height: 100%;
    width: 100%;
    font-family: "BotonReg", "Courier", "Courier New", "Bookman Old Style", serif;
    font-size: 16px;
    overflow-y: scroll;
    letter-spacing: 0.065em;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    font-smooth: 1em;
    text-shadow: 0 1px 1px rgba(255,255,255,.3);}
a {
    text-decoration: none;
    color: #a9a9a9;}
a:hover {
    text-decoration: none;
    color: #be1f2d;}
a:focus {
    text-decoration: none;
    color: #be1f2d;}
li {
    list-style-type: none;
    display: inline;}
.clear {    
    clear: both;}   
#container {
    position: relative;
    top: 0px;
    margin: 0px auto;
    width: 860px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    border: none;}
#topmenu {
    position: relative;
    top: 0px;
    left: 212px;
    width: 660px;
    height: 48px;}
.menubuttons {
    position: relative;
    top: 0px;
    width: 100px;
    height: 36px;
    background-image: url("images/menubg.png");
    background-repeat: repeat-x;
    padding: 10px 0px 0px 0px;
    float: left;}
.menubuttons:hover {
    position: relative;
    top: 0px;
    width: 100px;
    height: 36px;
    background-image: url("images/menubg_h.png");
    background-repeat: repeat-x;
    padding: 10px 0px 0px 0px;
    float: left;}
.menubuttonactive {
    position :relative;
    top: 0px;
    width: 100px;
    height: 36px;
    background-image: url("images/menubg_a.png");
    background-repeat: repeat-x;
    padding: 10px 0px 0px 0px;
    float: left;}
.menubuttonactive a {
    color: #be1f2d;}
#addressbox {
    position: absolute;
    top: 0px;
    width: 548px;
    left: 212px;
    height: 22px;
    background-image: url("images/menubg.png");
    background-repeat: repeat-x;
    padding: 10px 0px 0px 0px;
    letter-spacing: 0.062em;
    text-align: right;
    float: left;
    z-index: 900;}
#addressbox:hover {
    position: relative;
    top: 0px;
    width: 548px;;
    height: 22px;
    background-image: url("images/menubg_h.png");
    background-repeat: repeat-x;
    float: left;
    z-index: 900;
    color: #be1f2d;}
#addressboxbelow {
    position: absolute;
    top: 36px;
    width: 548px;
    left: 212px;
    height: 22px;
    background-image: url("images/menubg_h.png");
    background-repeat: repeat-x;
    text-align: right;
    float: left;
    z-index: 900;}
#contactrollover {
    position: relative;
    top: 0px;
    margin: 0px 0px -36px 0px;
    width: 100px;
    left: 0px;
    float: left;
    z-index: 900;}
#contactrollover div {
    width: 100px;
    height: 50px;
    float: left;}
#contactrollover a span {
    display: none;
    color: #a9a9a9;}
#contactrollover a {
    display: block;}
#contactrollover a:hover span {
  display: block;
  position: absolute;
  top: 0px;
  left: -560px;}
.buttonspaces {
    height: 36px;
    list-style: none;
    float: left;}
  </style>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>

</head>

<body onload="MM_preloadImages('images/menubg_b.png','images/th_att_b.png','images/th_bmw_b.png','images/th_directv_b.png','images/th_giostra_b.png')">

<div id="container">

<div id="topmenu">
    <ul id="menulist">
        <li class="menubuttonactive"><a href="portfolio.html">portfolio</a></li>
        <li class="buttonspaces"><img src="images/spacer.png" width="68" height="36" alt="spacer" /></li>
        <li class="menubuttons"><a href="about.html">about</a></li>
        <li class="buttonspaces"><img src="images/spacer.png" width="12" height="36" alt="spacer" /></li>
        <li class="menubuttons"><a href="downloads/raphael_zwyer_CV.pdf" target="_new">resume</a></li>
        <li class="buttonspaces"><img src="images/spacer.png" width="180" height="36" alt="spacer" /></li>
        <li id="contactrollover"><div class="menubuttons"><a href="mailto:info@raphaelzwyer.com">contact<span id="addressbox"><p>917-650-9534, info@raphaelzwyer.com<br/ ></p>143 leonard street, apartment 5, brooklyn ny 11206</span></a></div></li>
    </ul> <!-- end of menulist --> 
  </div> <!-- end of topmenu --> 

</div> <!-- end of container -->

<script type="text/javascript" src="js/raphaelzwyer.js"></script>

</body>
</html>

2 answers

solution1
 0  2012-09-09 17:08:24

No, there is no css only solution for delaying this. However you could get this to work, if your add the hover effect not on the a but on #contactrollover . It doesn't work right now because there is a space between #contactrollover a and #adressbox .

So it should look like this. 

    #contactrollover:hover span {
  display: block;
  position: absolute;
  top: 0px;
  left: -560px;}

For this to work in internet explorer the :hover pseudoclass needs to be on a link. So you can ether change the div #contactrollover to a link or get rid of the space in some other way.

solution2
 0  2012-09-09 17:11:51

您所要做的就是在弹出窗口中添加一些填充，以便在那里没有空间。 

#contactrollover a:hover span {padding-right: 12px;}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Disjointed rollover issues in explorer and safari two independent text-rollovers within a parent disjointed text-rollover ease-out after rollover disjointed image How to make a rollover div clickable? rollover text without <a href> Display an Image by Text rollover <li> rollover + text Appending text to a link on Rollover CSS Image rollover text Thumbnail rollover with text
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM