Question

我有一个文本翻转，其中地址块出现在翻转时。地址块本身有两个独立的翻转链接。这是（为了简化原因，我隔离了相关的顶级菜单）。请翻看“联系人”菜单，看看我的意思：

电子邮件链接工作正常，但我无法弄清楚如何使电话链接独立于电子邮件链接，这样如果您翻转电子邮件链接，它会将您带到您的电子邮件浏览器，如果您翻转电话线，它会拨打电话相应的电话号码（href =“tel：917-650 ....”等）。如果我在各自的段落标记中都有两个链接，则联系人翻转不再起作用。看起来链接标记需要围绕地址块包裹以进行联系人翻转工作，嵌套链接也不是解决方案。我该如何解决？

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>
<link href="css/raphaelzwyer.css" type="text/css" media="screen" title="raphaelzwyer stylesheet" rel="stylesheet" charset="utf-8"/>
<script type="text/javascript" src="js/raphaelzwyerFive.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" target="_new">contact
                        <span id="addressbox">
                                <p id="email">info@raphaelzwyer.com</p>
                                <p id="phone">917-650-9534</p>
                                <p id="address">143 leonard street, apartment 5, brooklyn ny 11206</p>
                        </span>
                     </a>
                 </div> <!-- end of menubuttons -->
          </li> <!-- end of contactrollover --> 
        </ul> <!-- end of menulist --> 
      </div> <!-- end of topmenu --> 
    </div>  <!-- end of header --> 
</body>
</html>

相关的CSS：

.menubuttons {
        position: relative;
        top: 0px;
        width: 100px;
        height: 36px;
        background-image: url("../images/menubg.png");
        background-repeat: repeat-x;
        padding-top: 10px;
        float: left;}
.menubuttons:hover {
        position: relative;
        top: 0px;
        width: 100px;
        height: 36px;
        background-image: url("../images/menubg_h.png");
        background-repeat: repeat-x;
        padding-top: 10px;
        float: left;}
.menubuttonactive {
        position :relative;
        top: 0px;
        width: 100px;
        height: 36px;
        background-image: url("../images/menubg_a.png");
        background-repeat: repeat-x;
        padding-top: 10px;
        float: left;}
.menubuttonactive a {
        color: #be1f2d;}
.buttonspaces {
        height: 36px;
        list-style: none;
        float: left;}
#contactrollover {
        position: relative;
        top: 0px;
        margin-bottom: -36px;
        width: 100px;
        left: 0px;
        float: left;}
#contactrollover div {
        width: 100px;
        height: 50px;
        float: left;}
#contactrollover a span {
        display: none;}
#contactrollover a {
        display: block;}
#contactrollover a:hover span {
        display: block;
        position: absolute;
        top: 0px;
        left: -560px;
        padding-right: 12px;}
#addressbox {
        position: absolute;
        top: 0px;
        width: 548px;
        left: 212px;
        height: 60px;
        background-image: url("../images/menubg.png");
        background-repeat: repeat-x;
        padding-top: 10px;
        letter-spacing: 0.062em;
        text-align: right;
        float: left;
        z-index: 800;
        color: #a9a9a9;
        background-color: white;}
#addressbox:hover {
        float: left;
        z-index: 900;}
#phone:hover, #email:hover {
        color: #be1f2d;}
#address {
        position: relative;
        width: 548px;;
        height: 22px;
        float: left;
        z-index: 900;
        color: #a9a9a9;}

Answer 1

您正在将所有内容包装在电子邮件链接中。请尝试这样做 - DEMO

的 HTML 的

<li id="contactrollover"> <div class="menubuttons"> <a href="mailto:info@raphaelzwyer.com" target="_new">contact</a> <span id="addressbox"> <p id="email"><a href="mailto:info@raphaelzwyer.com" target="_new">info@raphaelzwyer.com</a></p> <p id="phone"><a href="tel:917-650-9534" target="_new">917-650-9534</a></p> <p id="address">143 leonard street, apartment 5, brooklyn ny 11206</p> </span> </div>  </li> 

的 CSS 的

#contactrollover a+span { display: none; } #contactrollover a { display: block; } #contactrollover a:hover+span, #contactrollover span:hover { display: block; position: absolute; top: 0px; left: -560px; padding-right: 12px; }

父级脱节文本翻转中的两个独立文本翻转

1 个答案: