Question

我意识到HOVER没有在iPad上工作有很多问题/答案，但我认为我的问题略有不同。

我的问题是HOVER在桌面上运行良好，只有部分在iPad上工作（触摸设备）。我的意思是，如果我触摸iPad上的NAV栏上的其中一个列表，它可以正常工作，但如果我在NAV栏上选择另一个列表则不起作用 - （我的行为不一致）

我正在使用CSS / HTML（无法在jquery中编程）

所以在APPLE设备上，如果我触摸NAV的STEAM TOURS部分，则下拉显示正常。豪华旅游也是如此。但不适用于GENERAL或ENTHUSIASTS TOURS。但是它可以按预期在桌面上运行，并且可以在我的Android手机上运行

这是我的HTML

<div class="topbox">
<a href="index.php">Railwide.co.uk</a>
</div>
<div class="dropdown"> 
<ul> 
 <li><a href="index.php" style="font-family:sans-serif;font-size:17px;font-weight:bold; color:white;">Rail Tour Guide</a></li> 
 <li><a>Steam Rail Tours</a> 
  <ul> 
   <li><a href="steam-railtours-all.php">All Rail Tours</a></li> 
   <li><a href="steam-railtours-london.php">Pick Up - London</a></li>  
   <li><a href="steam-railtours-wales.php">Pick Up - Wales & Borders</a></li> 
   <li><a href="steam-railtours-sw.php">Pick Up - South West</a></li> 
   <li><a href="steam-railtours-se.php">Pick Up - South East</a></li> 
   <li><a href="steam-railtours-midlands.php">Pick Up - Midlands</a></li> 
   <li><a href="steam-railtours-yorkshire.php">Pick Up - Yorkshire</a></li> 
   <li><a href="steam-railtours-centralsouthern.php">Pick Up - Central Southern</a></li> 
   <li><a href="steam-railtours-eastanglia.php">Pick Up - East Anglia</a></li> 
   <li><a href="steam-railtours-nw.php">Pick Up - North West</a></li>
   <li><a href="steam-railtours-ne.php">Pick Up - North East</a></li> 
   <li><a href="steam-railtours-scotland.php">Pick Up - Scotland</a></li> 
   <li><a href="vsoe-steam-railtours.php">British Pullman (VSOE)</a></li> 
  </ul> 
 </li> 
 <li><a>Luxury Tours</a> 
  <ul> 
   <li><a href="luxury-railtours.php">All Rail Tours</a></li> 
   <li><a href="luxury-railtours-london.php">Pick Up - London</a></li> 
   <li><a href="luxury-railtours-wales.php">Pick Up - Wales & Borders</a></li> 
   <li><a href="luxury-railtours-sw.php">Pick Up - South West</a></li> 
   <li><a href="luxury-railtours-se.php">Pick Up - South East</a></li> 
   <li><a href="luxury-railtours-midlands.php">Pick Up - Midlands</a></li> 
   <li><a href="luxury-railtours-yorkshire.php">Pick Up - Yorkshire</a></li>
   <li><a href="luxury-railtours-centralsouthern.php">Pick Up - Central Southern</a></li>
   <li><a href="luxury-railtours-eastanglia.php">Pick Up - East Anglia</a></li> 
   <li><a href="luxury-railtours-nw.php">Pick Up - North West</a></li>
   <li><a href="luxury-railtours-ne.php">Pick Up - North East</a></li> 
   <li><a href="luxury-railtours-scotland.php">Pick Up - Scotland</a></li> 
   <li><a href="British-Pullman-luxury-railtours.php">British Pullman (VSOE)</a></li>
   <li><a href="Northern-Belle-luxury-railtours.php">Northern Belle (VSOE)</a></li>
  </ul> 
  </li> 
  <li><a>Enthusiasts Tours</a> 
  <ul> 
   <li><a href="rail-enthusiast-luxury-railtours.php">All Rail Tours</a></li> 
  </ul> 
  </li>  
  <li><a>General</a>
  <ul> 
   <li><a href="links.php">Links</a></li> 
   <li><a href="northernbelle.php">Northern Belle</a></li> 
   <li><a href="britishpullman.php">British Pullman</a></li> 
   <li><a href="accomadation.php">Rail Accomadation</a></li> 
   <li><a href="drs68002.php">DRS 68002</a></li> 
  </ul> 
  </li> 
 </ul> 
 </div>

这是CSS

     /* Navigation Style */ 
    .dropdown { position:relative; font-family: arial, sans-serif; width:100%; height:35px; border:1px solid #666666; font-size:14px; color:#ffffff; background:#333333; z-index:2; } 

    /* Basic List Styling (First/Base Level) */ 
    .dropdown ul {padding:0; margin:0; list-style: none;} 
    .dropdown ul li {float:left; position:relative;} 
    .dropdown ul li a { border-right:1px solid #666666; padding:0px 8px 0px 8px;line-height:35px;display:block; text-decoration:none; color:#000; text-align:center; color:#fff;} 
    .dropdown ul li a:hover {color:#ffffff; background:#232323;} 

    /* Second Level Drop Down Menu */ 
    .dropdown ul li ul {display: none;} 
    .dropdown ul li:hover ul { font-size:13px; display:block; position:absolute; border-top:1px solid #666666; top:35px; min-width:150px; left:0;} 
    .dropdown ul li:hover ul li a {display:block; background:#000; color:#ffffff; width:170px; } 
    .dropdown ul li:hover ul li a:hover {background:#666666; color:#ffffff;} 

    /* Third Level Drop Down Menu */ 
    .dropdown ul li:hover ul li ul {display: none;} 
    .dropdown ul li:hover ul li:hover ul { display:block; position:absolute; left:145px; top:0; } 

    #container {
    overflow:hidden;
    background:#F8ECC2;
    width:1000px;
    padding 0px 0px 0px 0px;
    margin: 0 auto;
    }

    .topbox {
    background:#FFFFFF;
    height:60px;
    }

    .topbox a {
    color:black;
    text-decoration:none;
    margin-left:20px;
    font-size:25px;
    font-family:'Rock Salt';
    }

这是一个jsfiddle

http://jsfiddle.net/ZQgm4/

Answer 1

由于悬停不适用于移动设备（除非您使用的是带有数字笔的设备），您可以尝试使用：active 选择器（a：active，nav：active等））当用户将手指放在目标元素上时触发。

悬停不适用于Ipad HTML / CSS

1 个答案: