2017-05-05 121 views
0

我有兩個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我想使它可點擊,但在位置區域我的圖像是不可點擊的我也想點擊位置區域 –

回答

0

我明白你的意思,你首先必須添加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