Bootstrap carrousel issue on hide nav buttons<button> vs. <input type=“button” />. Which to use?How can I know which radio button is selected via jQuery?How to create an HTML button that acts like a link?How to make Twitter Bootstrap menu dropdown on hover rather than clickBootstrap - Text-align class for inside tableCenter a column using Twitter Bootstrap 3How can I make Bootstrap columns all the same height?What is sr-only in Bootstrap 3?vertical-align with Bootstrap 3Cannot display HTML string
What is the name of meteoroids which hit Moon, Mars, or pretty much anything that isn’t the Earth?
Why use steam instead of just hot air?
What food production methods would allow a metropolis like New York to become self sufficient
Translation of the latin word 'sit' in Thomas Aquinas' works
Getting a error after using setState with a promise
Names of the Six Tastes
What is wrong with my code? RGB potentiometer
When quoting someone, is it proper to change "gotta" to "got to" without modifying the rest of the quote?
Would encrypting a database protect against a compromised admin account?
Why does increasing the sampling rate make implementing an anti-aliasing filter easier?
Pre-1993 comic in which Wolverine's claws were turned to rubber?
What was the plan for an abort of the Enola Gay's mission to drop the atomic bomb?
What can cause an unfrozen indoor copper drain pipe to crack?
Why is the Sun made of light elements only?
Removing all characters except digits from clipboard
How to get the IP of a user who executed a command?
The concept of information structure in incomplete information games
Different problems with tabularx
How to make a language evolve quickly?
Why should password hash verification be time consistent?
Electric kick drum pedal starts oscillating in such a way that it does not register hits
How is CoreiX like Corei5, i7 is related to Haswell, Ivy Bridge?
is it permitted to swallow spit on a fast day?
How to compare d20+x with advantage to d20+y without advantage (x < y)
Bootstrap carrousel issue on hide nav buttons
<button> vs. <input type=“button” />. Which to use?How can I know which radio button is selected via jQuery?How to create an HTML button that acts like a link?How to make Twitter Bootstrap menu dropdown on hover rather than clickBootstrap - Text-align class for inside tableCenter a column using Twitter Bootstrap 3How can I make Bootstrap columns all the same height?What is sr-only in Bootstrap 3?vertical-align with Bootstrap 3Cannot display HTML string
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
1
I have this code which is a bootstrap carrousel, i want it to display the class ".carousel-indicators" ( the nav buttons ) when i hover "#caroussel".
To do so i did put some opacity parameters so when i hover "#caroussel" it will pass from 0 to 1 to be visible, which is not working for now.
body
margin: 0;
.carousel-indicators li
width: 20px;
height: 20px;
border-radius: 100%;
border: 3px solid white;
color: grey;
.carousel-indicators .active
width: 20px;
height: 20px;
border-radius: 100%;
border: 3px solid black;
.carousel-indicators
opacity: 0;
#caroussel:hover,
#caroussel:hover~.carousel-indicators
opacity: 1;
<!--BS CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--BS JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="caroussel">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://fyf.tac-cdn.net/images/products/large/BF116-11KM.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://04dc27fa9cbd58cbea8c-bbb0d8e518ac050fae1d74ee0f9c6cec.ssl.cf4.rackcdn.com/images/products/340x397/29.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cdn.bloomnation.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/2/0/20140701073819_file_53b30e2b2de3f_56.jpeg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>Thanks everyone.
javascript html html5 twitter-bootstrap css3
edited Mar 21 at 18:39
brooksrelyt
1,86321425
asked Aug 28 '18 at 0:43
alioua walidalioua walid
749
add a comment |
1
I have this code which is a bootstrap carrousel, i want it to display the class ".carousel-indicators" ( the nav buttons ) when i hover "#caroussel".
To do so i did put some opacity parameters so when i hover "#caroussel" it will pass from 0 to 1 to be visible, which is not working for now.
body
margin: 0;
.carousel-indicators li
width: 20px;
height: 20px;
border-radius: 100%;
border: 3px solid white;
color: grey;
.carousel-indicators .active
width: 20px;
height: 20px;
border-radius: 100%;
border: 3px solid black;
.carousel-indicators
opacity: 0;
#caroussel:hover,
#caroussel:hover~.carousel-indicators
opacity: 1;
<!--BS CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--BS JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="caroussel">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://fyf.tac-cdn.net/images/products/large/BF116-11KM.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://04dc27fa9cbd58cbea8c-bbb0d8e518ac050fae1d74ee0f9c6cec.ssl.cf4.rackcdn.com/images/products/340x397/29.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cdn.bloomnation.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/2/0/20140701073819_file_53b30e2b2de3f_56.jpeg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>Thanks everyone.
javascript html html5 twitter-bootstrap css3
edited Mar 21 at 18:39
brooksrelyt
1,86321425
asked Aug 28 '18 at 0:43
alioua walidalioua walid
749
add a comment |
1
1
1
I have this code which is a bootstrap carrousel, i want it to display the class ".carousel-indicators" ( the nav buttons ) when i hover "#caroussel".
To do so i did put some opacity parameters so when i hover "#caroussel" it will pass from 0 to 1 to be visible, which is not working for now.
body
margin: 0;
.carousel-indicators li
width: 20px;
height: 20px;
border-radius: 100%;
border: 3px solid white;
color: grey;
.carousel-indicators .active
width: 20px;
height: 20px;
border-radius: 100%;
border: 3px solid black;
.carousel-indicators
opacity: 0;
#caroussel:hover,
#caroussel:hover~.carousel-indicators
opacity: 1;
<!--BS CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--BS JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="caroussel">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://fyf.tac-cdn.net/images/products/large/BF116-11KM.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://04dc27fa9cbd58cbea8c-bbb0d8e518ac050fae1d74ee0f9c6cec.ssl.cf4.rackcdn.com/images/products/340x397/29.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cdn.bloomnation.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/2/0/20140701073819_file_53b30e2b2de3f_56.jpeg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>Thanks everyone.
javascript html html5 twitter-bootstrap css3
edited Mar 21 at 18:39
brooksrelyt
1,86321425
asked Aug 28 '18 at 0:43
alioua walidalioua walid
749
I have this code which is a bootstrap carrousel, i want it to display the class ".carousel-indicators" ( the nav buttons ) when i hover "#caroussel".
To do so i did put some opacity parameters so when i hover "#caroussel" it will pass from 0 to 1 to be visible, which is not working for now.
body
margin: 0;
.carousel-indicators li
width: 20px;
height: 20px;
border-radius: 100%;
border: 3px solid white;
color: grey;
.carousel-indicators .active
width: 20px;
height: 20px;
border-radius: 100%;
border: 3px solid black;
.carousel-indicators
opacity: 0;
#caroussel:hover,
#caroussel:hover~.carousel-indicators
opacity: 1;
<!--BS CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--BS JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="caroussel">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://fyf.tac-cdn.net/images/products/large/BF116-11KM.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://04dc27fa9cbd58cbea8c-bbb0d8e518ac050fae1d74ee0f9c6cec.ssl.cf4.rackcdn.com/images/products/340x397/29.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cdn.bloomnation.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/2/0/20140701073819_file_53b30e2b2de3f_56.jpeg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>Thanks everyone.
body
margin: 0;
.carousel-indicators li
width: 20px;
height: 20px;
border-radius: 100%;
border: 3px solid white;
color: grey;
.carousel-indicators .active
width: 20px;
height: 20px;
border-radius: 100%;
border: 3px solid black;
.carousel-indicators
opacity: 0;
#caroussel:hover,
#caroussel:hover~.carousel-indicators
opacity: 1;
<!--BS CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--BS JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="caroussel">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://fyf.tac-cdn.net/images/products/large/BF116-11KM.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://04dc27fa9cbd58cbea8c-bbb0d8e518ac050fae1d74ee0f9c6cec.ssl.cf4.rackcdn.com/images/products/340x397/29.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cdn.bloomnation.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/2/0/20140701073819_file_53b30e2b2de3f_56.jpeg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>body
margin: 0;
.carousel-indicators li
width: 20px;
height: 20px;
border-radius: 100%;
border: 3px solid white;
color: grey;
.carousel-indicators .active
width: 20px;
height: 20px;
border-radius: 100%;
border: 3px solid black;
.carousel-indicators
opacity: 0;
#caroussel:hover,
#caroussel:hover~.carousel-indicators
opacity: 1;
<!--BS CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--BS JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="caroussel">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://fyf.tac-cdn.net/images/products/large/BF116-11KM.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://04dc27fa9cbd58cbea8c-bbb0d8e518ac050fae1d74ee0f9c6cec.ssl.cf4.rackcdn.com/images/products/340x397/29.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cdn.bloomnation.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/2/0/20140701073819_file_53b30e2b2de3f_56.jpeg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>javascript html html5 twitter-bootstrap css3
javascript html html5 twitter-bootstrap css3
edited Mar 21 at 18:39
brooksrelyt
1,86321425
asked Aug 28 '18 at 0:43
alioua walidalioua walid
749
edited Mar 21 at 18:39
brooksrelyt
1,86321425
asked Aug 28 '18 at 0:43
alioua walidalioua walid
749
edited Mar 21 at 18:39
brooksrelyt
1,86321425
edited Mar 21 at 18:39
brooksrelyt
1,86321425
edited Mar 21 at 18:39
brooksrelyt
1,86321425
1,86321425
asked Aug 28 '18 at 0:43
alioua walidalioua walid
749
asked Aug 28 '18 at 0:43
alioua walidalioua walid
749
asked Aug 28 '18 at 0:43
alioua walidalioua walid
749
749
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
1
You're using the wrong selector; ~ is the general sibling selector. Since .carousel-indicators is a child element of #caroussel, this should be all you need (using a descendant selector):
#caroussel:hover .carousel-indicators
opacity: 1;
answered Aug 28 '18 at 2:39
Tieson T.Tieson T.
17.8k35779
add a comment |
1
Try this code.
.carousel-indicators
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
opacity: 0;
#carousel:hover .carousel-indicators
opacity: 1;
edited Mar 23 at 9:29
brooksrelyt
1,86321425
answered Aug 28 '18 at 2:38
AbdulAhmad MatinAbdulAhmad Matin
7201822
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52048613%2fbootstrap-carrousel-issue-on-hide-nav-buttons%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You're using the wrong selector; ~ is the general sibling selector. Since .carousel-indicators is a child element of #caroussel, this should be all you need (using a descendant selector):
#caroussel:hover .carousel-indicators
opacity: 1;
answered Aug 28 '18 at 2:39
Tieson T.Tieson T.
17.8k35779
add a comment |
1
You're using the wrong selector; ~ is the general sibling selector. Since .carousel-indicators is a child element of #caroussel, this should be all you need (using a descendant selector):
#caroussel:hover .carousel-indicators
opacity: 1;
answered Aug 28 '18 at 2:39
Tieson T.Tieson T.
17.8k35779
add a comment |
1
1
1
You're using the wrong selector; ~ is the general sibling selector. Since .carousel-indicators is a child element of #caroussel, this should be all you need (using a descendant selector):
#caroussel:hover .carousel-indicators
opacity: 1;
answered Aug 28 '18 at 2:39
Tieson T.Tieson T.
17.8k35779
You're using the wrong selector; ~ is the general sibling selector. Since .carousel-indicators is a child element of #caroussel, this should be all you need (using a descendant selector):
#caroussel:hover .carousel-indicators
opacity: 1;
answered Aug 28 '18 at 2:39
Tieson T.Tieson T.
17.8k35779
edited Aug 28 '18 at 18:59
answered Aug 28 '18 at 2:39
Tieson T.Tieson T.
17.8k35779
answered Aug 28 '18 at 2:39
Tieson T.Tieson T.
17.8k35779
answered Aug 28 '18 at 2:39
Tieson T.Tieson T.
17.8k35779
17.8k35779
add a comment |
add a comment |
1
Try this code.
.carousel-indicators
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
opacity: 0;
#carousel:hover .carousel-indicators
opacity: 1;
edited Mar 23 at 9:29
brooksrelyt
1,86321425
answered Aug 28 '18 at 2:38
AbdulAhmad MatinAbdulAhmad Matin
7201822
add a comment |
1
Try this code.
.carousel-indicators
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
opacity: 0;
#carousel:hover .carousel-indicators
opacity: 1;
edited Mar 23 at 9:29
brooksrelyt
1,86321425
answered Aug 28 '18 at 2:38
AbdulAhmad MatinAbdulAhmad Matin
7201822
add a comment |
1
1
1
Try this code.
.carousel-indicators
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
opacity: 0;
#carousel:hover .carousel-indicators
opacity: 1;
edited Mar 23 at 9:29
brooksrelyt
1,86321425
answered Aug 28 '18 at 2:38
AbdulAhmad MatinAbdulAhmad Matin
7201822
Try this code.
.carousel-indicators
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
opacity: 0;
#carousel:hover .carousel-indicators
opacity: 1;
edited Mar 23 at 9:29
brooksrelyt
1,86321425
answered Aug 28 '18 at 2:38
AbdulAhmad MatinAbdulAhmad Matin
7201822
edited Mar 23 at 9:29
brooksrelyt
1,86321425
edited Mar 23 at 9:29
brooksrelyt
1,86321425
edited Mar 23 at 9:29
brooksrelyt
1,86321425
1,86321425
answered Aug 28 '18 at 2:38
AbdulAhmad MatinAbdulAhmad Matin
7201822
answered Aug 28 '18 at 2:38
AbdulAhmad MatinAbdulAhmad Matin
7201822
answered Aug 28 '18 at 2:38
AbdulAhmad MatinAbdulAhmad Matin
7201822
7201822
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52048613%2fbootstrap-carrousel-issue-on-hide-nav-buttons%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
