Question

我有基于文本的导航。滚动“联系人”会在所有其他菜单按钮上显示地址（图层）。我希望电子邮件地址和电话号码是翻转（从灰色变为红色）以及可点击的链接。问题：推出会使地址消失，这是有意的但是无法点击地址/电话链接。如果推出效果（消失）会延迟，它会起作用吗？是否只有CSS解决方案？

这是页面： 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>

Answer 1

不，没有css唯一的解决方案来延迟这个。但是，如果您将悬停效果添加到a而不是#contactrollover上，则可以使其生效。它现在不起作用，因为#contactrollover a和#adressbox之间有一个空格。

所以看起来应该是这样的。

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

为了在Internet Explorer中工作，:hover伪类需要在链接上。因此，您可以将div #contactrollover更改为链接或以其他方式删除空格。

Answer 2

你需要做的就是在弹出窗口中添加一些填充，这样就没有空间了。

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

脱节的可点击文本翻转

2 个答案: