您的位置: 首页  >  技术问答  >  可定位的可点击区域

可定位的可点击区域

分类: 技术问答 • 2022-08-02 20:09:10
问题描述：

我有两个div我的第一个div包含与图像的链接，我的第二个div与position:absolute我的绝对区域不是可以绑定的，我怎样才能让它变得可以绑定？可定位的可点击区域

我可以点击空吗是我的位置：绝对？

你在这里，这是我的代码，我使用的引导

.item img{ 
 
    width:100%; 
 
    height:700px !important; 
 
    max-width:100%; 
 
    display:block; 
 
} 
 
.booking-form { 
 
    position: absolute; 
 
    z-index: 10; 
 
    margin-top: 45px; 
 
    right: 0; 
 
    left: 0; 
 
} 
 

 
.tab-system .tab-content{ 
 
    padding:12px; 
 
    background:#FFF; 
 
} 
 
.carousel-control.left, .carousel-control.right { 
 
    background-image: none; 
 
    -webkit-transition: all ease-in-out 0.6s; 
 
    -moz-transition: all ease-in-out 0.6s; 
 
    transition: all ease-in-out 0.6s; 
 
} 
 
.carousel-control{  
 
    width: auto; 
 
    position: absolute; 
 
    bottom: auto; 
 
    top: 50%; 
 
    margin-top: -10px; 
 
    display: inline-block; 
 
} 
 
.carousel-control.right { 
 
     right: 10%; 
 

 
} 
 
.carousel-control.left { 
 
    left: 10%; 
 
}
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> 
 
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> 
 

 
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    
 
    <div class="booking-form"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <div class="tab-system"> 
 

 
    <!-- Nav tabs --> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
 
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> 
 
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> 
 
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> 
 
    </ul> 
 

 
    <!-- Tab panes --> 
 
    <div class="tab-content"> 
 
    <div role="tabpanel" class="tab-pane active" id="home"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam commodi accusantium, voluptas quisquam obcaecati labore odit tenetur amet ex libero iste quam, nostrum temporibus architecto mollitia ipsum dignissimos non similique.</p> 
 
    </div> 
 
    <div role="tabpanel" class="tab-pane" id="profile">...</div> 
 
    <div role="tabpanel" class="tab-pane" id="messages">...</div> 
 
    <div role="tabpanel" class="tab-pane" id="settings">...</div> 
 
    </div> 
 

 
</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div><!-- this is the booking form--> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <a href="#"><img src="https://images.pexels.com/photos/40797/wild-flowers-flowers-plant-macro-40797.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></a> 
 
    </div> 
 
    <div class="item"> 
 
     <a href="#"><img src="https://images.pexels.com/photos/3247/nature-forest-industry-rails.jpg?w=1260&h=750&auto=compress&cs=tinysrgb"></a> 
 
    </div> 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 

 
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

+0

你要像'指针的事件：无;'？在你的'.booking-form'中使用它。为了让你的标签也可以使用'.nav-tabs {pointer-events：visible; }'。 – Huelfe

+0

你想点击标签正文并触发滑块？ – madalinivascu

+0

我的图像有一个href我想使它可点击，但在位置区域我的图像是不可点击的我也想点击位置区域 –

答

我明白你的意思，你首先必须添加pointer-events: none;财产为你的父母元素，你有为您的子元素添加pointer-events: visible;属性。

现在它的工作

.item img{ 
 
    width:100%; 
 
    height:700px !important; 
 
    max-width:100%; 
 
    display:block; 
 
} 
 
.booking-form { 
 
    position: absolute; 
 
    z-index: 10; 
 
    margin-top: 45px; 
 
    right: 0; 
 
    left: 0; 
 
    pointer-events: none; 
 
} 
 
.tab-system{ 
 
    pointer-events: visible; 
 
} 
 

 
.tab-system .tab-content{ 
 
    padding:12px; 
 
    background:#FFF; 
 
} 
 
.carousel-control.left, .carousel-control.right { 
 
    background-image: none; 
 
    -webkit-transition: all ease-in-out 0.6s; 
 
    -moz-transition: all ease-in-out 0.6s; 
 
    transition: all ease-in-out 0.6s; 
 
} 
 
.carousel-control{  
 
    width: auto; 
 
    position: absolute; 
 
    bottom: auto; 
 
    top: 50%; 
 
    margin-top: -10px; 
 
    display: inline-block; 
 
} 
 
.carousel-control.right { 
 
     right: 10%; 
 

 
} 
 
.carousel-control.left { 
 
    left: 10%; 
 
}
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> 
 
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> 
 

 
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    
 
    <div class="booking-form"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <div class="tab-system"> 
 

 
    <!-- Nav tabs --> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
 
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> 
 
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> 
 
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> 
 
    </ul> 
 

 
    <!-- Tab panes --> 
 
    <div class="tab-content"> 
 
    <div role="tabpanel" class="tab-pane active" id="home"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam commodi accusantium, voluptas quisquam obcaecati labore odit tenetur amet ex libero iste quam, nostrum temporibus architecto mollitia ipsum dignissimos non similique.</p> 
 
    </div> 
 
    <div role="tabpanel" class="tab-pane" id="profile">...</div> 
 
    <div role="tabpanel" class="tab-pane" id="messages">...</div> 
 
    <div role="tabpanel" class="tab-pane" id="settings">...</div> 
 
    </div> 
 

 
</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div><!-- this is the booking form--> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <a href="#"><img src="https://images.pexels.com/photos/40797/wild-flowers-flowers-plant-macro-40797.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></a> 
 
    </div> 
 
    <div class="item"> 
 
     <a href="#"><img src="https://images.pexels.com/photos/3247/nature-forest-industry-rails.jpg?w=1260&h=750&auto=compress&cs=tinysrgb"></a> 
 
    </div> 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 

 
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

+0

好吧，只需我的意见，并将其发布为答案.. – Huelfe

相关推荐