Question

我插入了下面的代码，其中包含右侧菜单和悬停效果。我也有一些链接的内容。但由于菜单，该链接无法点击。

.menubar{position: fixed;right:0;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);-o-transform: translateY(-50%);-moz-transform: translateY(-50%);overflow: hidden;z-index: 1;}
    .menu{width: auto;height: 40px;line-height: 40px;padding: 0 15px;transform: translateX(85%);-webkit-transform: translateX(85%);-o-transform: translateX(85%);-moz-transform: translateX(85%);transition: all 0.5s ease;margin: 10px auto;border-radius: 5px;cursor: pointer;}
    .menu a{color: #fff;}
    .menu a:hover{color: #fff;opacity:1;}
    .menu a i{margin-right: 10px;}
    .menu:hover{transform: translateX(0%);-webkit-transform: translateX(0%);-o-transform: translateX(0%);-moz-transform: translateX(0%);}
    .blue-bkg{background: #38488e;}
    .homemenu-blue-bkg{background: #38488e;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  
    <div class="menubar hidden-xs">
    	<div class="menu homemenu-blue-bkg" data-dept="blue"><a href="#"><i class="icon-home"></i>Home</a></div>
    	<div class="menu blue-bkg" data-dept="srt"><a href="#"><i class="icon-srt"></i>Share Registry & Transfer</a></div>
    	<div class="menu blue-bkg" data-dept="payroll"><a href="#"><i class="icon-pp"></i>Payroll Processing</a></div>
    	<div class="menu blue-bkg" data-dept="trust"><a href="#"><i class="icon-ta"></i>Trust Administration</a></div>
    	<div class="menu blue-bkg" data-dept="rms"><a href="#"><i class="icon-rms"></i>Record Management Services</a></div>
    	<div class="menu blue-bkg" data-dept="dsc"><a href="#"><i class="icon-dsc"></i>Digital Signature Certification</a></div>
    	<div class="menu blue-bkg" data-dept="cfdm"><a href="#"><i class="icon-cfdm"></i>Corporate FD Management</a></div>
    </div>
    <div class="container-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p><p>, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived</p><p> not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum  Aldus PageMaker including.
    <a href="click here">More</a></p>
    </div>
    </div>

我想要菜单的悬停效果以及链接应该可点击。我怎样才能做到这一点。

Answer 1

试试这段代码..我希望这有帮助

<a href="http://www.breedeal.com" target="_blank">More</a>
<a href="javascript:void(0)">More</a>

并像这样添加css

a:hover{ color: black; }

Answer 2

您还没有正确关闭标签。

<dependency>
    <groupId>net.java.dev.jna</groupId>
    <artifactId>platform</artifactId>
    <version>3.4.0</version>
    <scope>test</scope>
</dependency>

Answer 3

给它一个z-index如下：

将一个类添加到a元素

 <a href="click here" class="text-link">More</a></p>

并将此标记添加到其中

.text-link {
    position: relative;
    z-index: 1;
}

Answer 4

如果您尝试点击菜单项而不是a href链接。

然后将锚标记包装在菜单项div

之外

<a href="http://www.google.com" target="_blank" ><div class="menu homemenu-blue-bkg" data-dept="blue"><i class="icon-home"></i>Home</div></a>

否则只需点击内容（共享注册表和转移），您的链接就可以使用

<div class="menu blue-bkg" data-dept="srt"><a href="http://www.google.com" target="_blank"><i class="icon-srt"></i>Share Registry & Transfer</a></div>

Working Plnkr

Answer 5

稍微调整一下。看看这个。如果需要，您可以考虑将供应商前缀添加到transform。

在底部超链接的#属性中为click here添加了href。
将整个.menubar向右移动到85％（画布外）。
要求.menu在悬停时向左翻译85％。

    .menubar{position: fixed;right:0;top: 50%;transform: translate(85%,-50%);z-index: 1;}
    .menu{width: auto;height: 40px;line-height: 40px;padding: 0 15px;transition: all 0.5s ease;margin: 10px auto;border-radius: 5px;cursor: pointer;}
    .menu a{color: #fff;}
    .menu a:hover{color: #fff;opacity:1;}
    .menu a i{margin-right: 10px;}
    .menu:hover{transform: translateX(-85%);}
    .blue-bkg{background: #38488e;}
    .homemenu-blue-bkg{background: #38488e;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  
    <div class="menubar hidden-xs">
    	<div class="menu homemenu-blue-bkg" data-dept="blue"><a href="#"><i class="icon-home"></i>Home</a></div>
    	<div class="menu blue-bkg" data-dept="srt"><a href="#"><i class="icon-srt"></i>Share Registry & Transfer</a></div>
    	<div class="menu blue-bkg" data-dept="payroll"><a href="#"><i class="icon-pp"></i>Payroll Processing</a></div>
    	<div class="menu blue-bkg" data-dept="trust"><a href="#"><i class="icon-ta"></i>Trust Administration</a></div>
    	<div class="menu blue-bkg" data-dept="rms"><a href="#"><i class="icon-rms"></i>Record Management Services</a></div>
    	<div class="menu blue-bkg" data-dept="dsc"><a href="#"><i class="icon-dsc"></i>Digital Signature Certification</a></div>
    	<div class="menu blue-bkg" data-dept="cfdm"><a href="#"><i class="icon-cfdm"></i>Corporate FD Management</a></div>
    </div>
    <div class="container-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p><p>, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived</p><p> not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum  Aldus PageMaker including.
    <a href="#">More</a></p>
    </div>
    </div>

干杯！

由于菜单，链接无法点击

5 个答案: