兩個獨立的文本滾動在一個父離散的文本滾動內

我有一個文本滾動，其中地址塊出現在滾動。地址塊本身有兩個獨立的翻轉鏈接。在這裏（爲了簡化原因，我隔離了相關的頂層菜單）。請翻轉的「聯繫人」菜單，看看我的意思是：兩個獨立的文本滾動在一個父離散的文本滾動內

電子郵件中的鏈接工作正常，但我無法弄清楚如何使獨立於電子郵件鏈接的電話鏈接，這樣，如果你翻轉它將您帶到您的電子郵件瀏覽器的電子郵件鏈接，並且如果您翻轉電話線，它會撥打相應的電話號碼（帶有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:[email protected]" target="_new">contact 
         <span id="addressbox"> 
           <p id="email">[email protected]</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;}

來源

2012-09-19 rapha

你包裹在你的電子郵件鏈接的一切。試試這個 - DEMO

HTML

<li id="contactrollover"> 
    <div class="menubuttons"> 
     <a href="mailto:[email protected]" target="_new">contact</a> 
     <span id="addressbox"> 
      <p id="email"><a href="mailto:[email protected]" target="_new">[email protected]</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> <!-- end of menubuttons --> 
</li> <!-- end of contactrollover -->

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; 
}

來源

2012-09-19 19:46:58

就像一個魅力。謝謝，佐爾坦！我不知道+語法規則，如：hover + span。我在哪裏可以找到有關這方面的信息，以便我可以更好地理解它？ – rapha

這是一篇關於一些有用的CSS選擇器的體面文章 - http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ –

兩個獨立的文本滾動在一個父離散的文本滾動內

回答

相關問題