Bootstrap Botton Hover

Asked

Viewed 37 times

-1

Well I tried a lot more I could not make these buttons work as a Hover in case an onmousemove the intention is this instead of just clicking the Mouser and appear the text I tried to trigger

data-Bs-toggle="Pill" data-Bs-target="#pills-2

in html by js with an input function more did not work out is like an add.class well I am without ideas any help is valida des de já Valew<3

  <!doctype html>
    <html lang="en">
    
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    
        <title>Hello, world!</title>
    </head>
    
    <body>
    
        <ul class="nav nav-pills">
            <li>
                <button class="nav-link active" id="1" data-bs-toggle="pill" data-bs-target="#pills-1"
                    aria-controls="pills-1" aria-selected="true">1</button>
            </li>
            <li>
                <button class="nav-link" id="2" data-bs-toggle="pill" data-bs-target="#pills-2"
                    aria-controls="pills-2">2</button>
            </li>
            <li>
                <button class="nav-link" id="3" data-bs-toggle="pill" data-bs-target="#pills-3"
                    aria-controls="pills-3" >3</button>
            </li>
        </ul>
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" id="pills-1" >111111</div>
            <div class="tab-pane fade" id="pills-2">222222</div>
            <div class="tab-pane fade" id="pills-3">333333</div>
        </div>
    
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
        </script>
    
    </body>
    
    </html>

bootstrap-4

1 answer

0


Would that be it? At Hover the text appears, it does exactly the same as the click but at Hover.

$('.nav-link').on('mouseover', function(){
  //botões
  $('.active').removeClass('active');
  $(this).addClass('active');
  //texto
  var tabId = $(this).data('bs-target');
  $(tabId).addClass('active');
  $(tabId).addClass('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
    <html lang="en">
    
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    
        <title>Hello, world!</title>
    </head>
    
    <body>
    
        <ul class="nav nav-pills">
            <li>
                <button class="nav-link active" id="1" data-bs-toggle="pill" data-bs-target="#pills-1"
                    aria-controls="pills-1" aria-selected="true">1</button>
            </li>
            <li>
                <button class="nav-link" id="2" data-bs-toggle="pill" data-bs-target="#pills-2"
                    aria-controls="pills-2">2</button>
            </li>
            <li>
                <button class="nav-link" id="3" data-bs-toggle="pill" data-bs-target="#pills-3"
                    aria-controls="pills-3" >3</button>
            </li>
        </ul>
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" id="pills-1" >111111</div>
            <div class="tab-pane fade" id="pills-2">222222</div>
            <div class="tab-pane fade" id="pills-3">333333</div>
        </div>
    
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
        </script>
    
    </body>
    
    </html>

  • 1

    exactly that <3 thank you very much

Browser other questions tagged bootstrap-4

You are not signed in. Login or sign up in order to post.