Блог

Главная - Вопросы по программированию - Как активировать кнопку наведения в начальной загрузке 3?

Как активировать кнопку наведения в начальной загрузке 3?

#javascript #html #jquery #css

Вопрос:

у меня на странице есть несколько кнопок, реализованных с помощью bootstrap 3 и html. Кнопка с названием «Вода» должна открывать другие кнопки, как только на нее наведена мышь, и должна скрывать их, как только мышь отходит от нее. В настоящее время кнопки открываются после нажатия кнопки «Вода». я реализовал функцию наведения курсора, которую можно увидеть в javascript и html, но, похоже, она не работает. Как я могу настроить divs или классы так, чтобы это работало?

Вот код и скрипка : https://jsfiddle.net/2vok9hLw/

 $( document ).ready(function() {   
    $('#create_btn').on('click', function(){
        $('#create_tab').tab('show')
    })

    
    $('#login_btn').on('click', function(){
        $('#login_tab').tab('show')
    })

     $('#create_btn').on('click', function(){
        $('#create1_tab').tab('show')
    })
    $(".hover_btn").click(function(e){
        e.preventDefault();
    })

    
    $(".hover_btn").hover(function(e){
        e.preventDefault();
        $("#tab2default1").css("opacity","1");
    })

    
    $(".hover_btn").mouseleave(function(e){
        e.preventDefault();
        $("#tab2default1").css("opacity","0");
    })
    
    $(".hover_btn2").hover(function(e){
        e.preventDefault();
        $("#tab2default1").css("opacity","1");
    })
    
    $(".hover_btn2").mouseleave(function(e){
        e.preventDefault();
        $("#tab2default1").css("opacity","0");
    })

});



     
   #customTab a {
            padding: 0;
        }

        .flex {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            flex-wrap: wrap;
        }

        @media (max-width: 576px) {
            .container {
                padding: 0;
            }

            .btn {
                padding: 3px 6px;
                font-size: 12px;
            }
            .flex .panel-default{
                margin-right: 4px;
            }
            .flex .panel-default>.panel-heading{
                padding: 0;
            }
            .flex .panel-default>.panel-body .btn:last-child{
                margin-top: 4px;
            }
        }

        .btn-dark {
            background-color: #343a40;
            color: #fff;
        }

        .btn-dark:hover,.btn.focus, .btn:focus {
            color: #fff;
        }
        .btn.focus, .btn:focus,.btn:active,.btn:hover , .active >a .btn{
            color: #fff;
            background: blue;
        }
        .nav-tabs{
            border: none;
        }
        
        .hover_btn{
            background-image: url(air.jfif);
            background-size: cover;
            color: #000;
            height: 200px;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
        }
        
        .hover_btn:hover{
            background-image: url(air.jfif);
            background-size: cover;
            color: #000;
            height: 200px;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
            opacity: 0.9;
        } 
 <html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<main>
   <div><br></br>Some text.</div>
        <div class="container" id="customTab">
            </div>
                <div class="panel-heading">
                    <ul class="nav nav-tabs" style="display: flex; justify-content: space-around; border: none;">
                        <li><span class="btn btn-info btn-lg ">main heading</span></a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
        <br></br>
        <div class="container" id="customTab">
                    <ul class="nav " style="display: flex; justify-content: space-around; border: none;">
                        <li><a href="#tab1default" data-toggle="tab"><span class="hover_btn" >Water</span></a>
                        </li>
                        <li><a href="#tab2default" data-toggle="tab"><span
                                    class="btn btn-info">a</span></a></li>
                        <li><a href="#tab3default" data-toggle="tab"><span
                                    class="btn btn-info">b<br>b2</br>
                                     </span></a>
                        </li>
                        <li><a href="#tab4default" data-toggle="tab"><span class="btn btn-info">c</span></a>
                        </li>
                        <li><a href="#tab5default" data-toggle="tab"><span class="btn btn-info">d</span></a>
                        </li>
                        <li><a href="#tab6default" data-toggle="tab"><span class="btn btn-info">e<br>e2</br>
                             
                            
                        </span></a></li>
                    </ul>
                </div>
                </div>
                <div class="tab-content hover_btn2">
                    <div class= "hover_btn2" >
                        <div class="tab-pane fade" id="tab1default"  >
                            <div class="flex ">
                                        <ul class="nav nav-tabs">
                                            <li data-toggle="tab"><span
                                                        class="btn btn-info">1</span></li>
                                        </ul>
                              
                                <div class=" panel-default">
                                        <ul class="nav nav-tabs">
                                            <li a id="login_btn"><span class="btn btn-info" data-target="#signin" data-toggle="modal">2</span></a>
                                        </li>
                                        </ul>
                                    <div class="modal fade" id="signin" role="dialog">
                                        <div class="modal-body">
                                        <div class="well">
                                            <ul class="nav nav-tabs">
                                                <li class="active"><a id="login_tab" href="#login" data-toggle="tab">3</a></li>
                                                <li class=""><a id="create_tab" href="#create" data-toggle="tab">Reviews</a></li>
                                                <li class=""><a id="create1_tab" href="#create1" data-toggle="tab">Workflows</a></li>
                                            </ul>
                            
                                            <div id="myTabContent" class="tab-content ">
                                                <div class="tab-pane active in" id="login">
                                               <iframe src= "" style="border:none;width:1450px;height:600px;" >
                                           
                                               </iframe>     
                                                </div>
                                                <div class="tab-pane fade.in" id="create">
                                                 <p>
                                                 hello
                                                 </p>
                                                </div>
                                                <div class="tab-pane fade.in" id="create1">
                                                 <p>
                                                 hellosss
                                                 </p>
                                                </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-danger" data-dismiss="modal" >Cancel</button>
                                    </div>
                                </div>
                            </div>    

                                   
                                </div>
                                <div >
                                        <ul class="nav nav-tabs">
                                            <li href="#tab2default3" data-toggle="tab"><span
                                                        class="btn btn-info">4</span></li>
                                        </ul>
                                        <br></br>
                                        <div class="flex tab-pane fade" id="tab2default3">
                                                    <ul class="nav nav-tabs">
                                                        <li href="#tab22default3" data-toggle="tab"><span
                                                                    class="btn btn-info">4</span>
                                                        </li>
                                                    </ul>
                                              
                                                    <ul class="nav nav-tabs">
                                                        <li href="#tab222default3" data-toggle="tab"><span
                                                                    class="btn btn-info">5</span>
                                                        </li>
                                                    </ul>
                                               
                                            </div>
                                        </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tab2default">
                            <div class="flex">
                                <div class="panel with-nav-tabs panel-default">
                                    <div class="panel-heading">
                                        <ul class="nav nav-tabs">
                                            <li><a href="#tab3default1" data-toggle="tab"><span
                                                        class="btn btn-info">6</span></a></li>
                                        </ul>
                                    </div>
                                    <div class="panel-body">
                                        <div class="tab-pane fade" id="tab3default1">
                                            <button class="btn btn-success" data-toggle="modal"
                                                data-target="#myModal7">Workflow</button>
                                            <button class="btn btn-info" data-toggle="modal"
                                                data-target="#myModal8">Reviews</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel with-nav-tabs panel-default">
                                    <div class="panel-heading">
                                        <ul class="nav nav-tabs">
                                            <li><a href="#tab3default2" data-toggle="tab"><span
                                                        class="btn btn-info">7</span></a></li>
                                        </ul>
                                    </div>
                                    <div class="panel-body">
                                        <div class="tab-pane fade" id="tab3default2">
                                            <button class="btn btn-success" data-toggle="modal"
                                                data-target="#myModal9">Workflow</button>
                                            <button class="btn btn-info" data-toggle="modal"
                                                data-target="#myModal10">Reviews</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel with-nav-tabs panel-default">
                                    <div class="panel-heading">
                                        <ul class="nav nav-tabs">
                                            <li><a href="#tab3default3" data-toggle="tab"><span
                                                        class="btn btn-info">8</span></a></li>
                                        </ul>
                                    </div>
                                    <div class="panel-body">
                                        <div class="tab-pane fade" id="tab3default3">
                                            <button class="btn btn-success" data-toggle="modal"
                                                data-target="#myModal11">Workflow</button>
                                            <button class="btn btn-info" data-toggle="modal"
                                                data-target="#myModal12">Reviews</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tab3default">
                            <div class="flex">
                          
                                <div class="panel with-nav-tabs panel-default">
                                    <div class="panel-heading">
                                        <ul class="nav nav-tabs">
                                            <li><a href="#tab5default2" data-toggle="tab"><span
                                                        class="btn btn-info">9</span></a></li>
                                        </ul>
                                    </div>
                                    <div class="panel-body">
                                        <div class="tab-pane fade" id="tab5default2">
                                            <button class="btn btn-success" data-toggle="modal"
                                                data-target="#myModal21">Workflow</button>
                                            <button class="btn btn-info" data-toggle="modal"
                                                data-target="#myModal22">Reviews</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel with-nav-tabs panel-default">
                                    <div class="panel-heading">
                                        <ul class="nav nav-tabs">
                                            <li><a href="#tab5default3" data-toggle="tab"><span
                                                        class="btn btn-info">10</span></a></li>
                                        </ul>
                                    </div>
                                    <div class="panel-body">
                                        <div class="tab-pane fade" id="tab5default3">
                                            <button class="btn btn-success" data-toggle="modal"
                                                data-target="#myModal23">Workflow</button>
                                            <button class="btn btn-info" data-toggle="modal"
                                                data-target="#myModal24">Reviews</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tab4default">
                            <div class="flex">
                                <div class="panel with-nav-tabs panel-default">
                                    <div class="panel-heading">
                                        <ul class="nav nav-tabs">
                                            <li><a href="#tab6default1" data-toggle="tab"><span
                                                        class="btn btn-info">11</span></a></li>
                                        </ul>
                                    </div>
                                    <div class="panel-body">
                                        <div class="tab-pane fade" id="tab6default1">
                                            <button class="btn btn-success" data-toggle="modal"
                                                data-target="#myModal25">Workflow</button>
                                            <button class="btn btn-info" data-toggle="modal"
                                                data-target="#myModal26">Reviews</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel with-nav-tabs panel-default">
                                    <div class="panel-heading">
                                        <ul class="nav nav-tabs">
                                            <li><a href="#tab6default2" data-toggle="tab"><span
                                                        class="btn btn-info">12</span></a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="panel-body">
                                        <div class="tab-pane fade" id="tab6default2">
                                            <button class="btn btn-success" data-toggle="modal"
                                                data-target="#myModal27">Workflow</button>
                                            <button class="btn btn-info" data-toggle="modal"
                                                data-target="#myModal28">Reviews</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel with-nav-tabs panel-default">
                                    <div class="panel-heading">
                                        <ul class="nav nav-tabs">
                                            <li><a href="#tab6default3" data-toggle="tab"><span
                                                        class="btn btn-info">13</span></a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="panel-body">
                                        <div class="tab-pane fade" id="tab6default3">
                                            <button class="btn btn-success" data-toggle="modal"
                                                data-target="#myModal29">Workflow</button>
                                            <button class="btn btn-info" data-toggle="modal"
                                                data-target="#myModal30">Reviews</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
</main>
</body>
</html>

Ответ №1:

не могли бы вы навести воду и сказать мне, был ли это ваш ожидаемый результат? (запустите фрагмент

 $( document ).ready(function() {   
    $('#create_btn').on('click', function(){
        $('#create_tab').tab('show')
    })

    
    $('#login_btn').on('click', function(){
        $('#login_tab').tab('show')
    })

     $('#create_btn').on('click', function(){
        $('#create1_tab').tab('show')
    })
    $(".hover_btn").click(function(e){
        e.preventDefault();
    })

    
    $(".hover_btn").mouseenter(function(e){
        e.preventDefault();
        $("#tab1default").css("opacity","1");
    })

    
    $(".hover_btn").mouseleave(function(e){
        e.preventDefault();
        $("#tab1default").css("opacity","0");
    })
    
    $(".hover_btn2").hover(function(e){
        e.preventDefault();
        $("#tab2default1").css("opacity","1");
    })
    
    $(".hover_btn2").mouseleave(function(e){
        e.preventDefault();
        $("#tab2default1").css("opacity","0");
    })

}); 
   #customTab a {
            padding: 0;
        }

        .flex {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            flex-wrap: wrap;
        }

        @media (max-width: 576px) {
            .container {
                padding: 0;
            }

            .btn {
                padding: 3px 6px;
                font-size: 12px;
            }
            .flex .panel-default{
                margin-right: 4px;
            }
            .flex .panel-default>.panel-heading{
                padding: 0;
            }
            .flex .panel-default>.panel-body .btn:last-child{
                margin-top: 4px;
            }
        }

        .btn-dark {
            background-color: #343a40;
            color: #fff;
        }

        .btn-dark:hover,.btn.focus, .btn:focus {
            color: #fff;
        }
        .btn.focus, .btn:focus,.btn:active,.btn:hover , .active >a .btn{
            color: #fff;
            background: blue;
        }
        .nav-tabs{
            border: none;
        }
        
        .hover_btn{
            background-image: url(air.jfif);
            background-size: cover;
            color: #000;
            height: 200px;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
        }
        
        .hover_btn:hover{
            background-image: url(air.jfif);
            background-size: cover;
            color: #000;
            height: 200px;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
            opacity: 0.9;
        } 
 <html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<main>
   <div><br></br>Some text.</div>
        <div class="container" id="customTab">
            </div>
                <div class="panel-heading">
                    <ul class="nav nav-tabs" style="display: flex; justify-content: space-around; border: none;">
                        <li><span class="btn btn-info btn-lg ">main heading</span></a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
        <br></br>
        <div class="container" id="customTab">
                    <ul class="nav " style="display: flex; justify-content: space-around; border: none;">
                        <li><a href="#tab1default" data-toggle="tab" id="test"><span class="hover_btn" >Water</span></a>
                        </li>
                        <li><a href="#tab2default" data-toggle="tab"><span
                                    class="btn btn-info">aaaa</span></a></li>
                        <li><a href="#tab3default" data-toggle="tab"><span
                                    class="btn btn-info">b<br>b2</br>
                                     </span></a>
                        </li>
                        <li><a href="#tab4default" data-toggle="tab"><span class="btn btn-info">c</span></a>
                        </li>
                        <li><a href="#tab5default" data-toggle="tab"><span class="btn btn-info">d</span></a>
                        </li>
                        <li><a href="#tab6default" data-toggle="tab"><span class="btn btn-info">e<br>e2</br>
                             
                            
                        </span></a></li>
                    </ul>
                </div>
                </div>
                <div class="tab-content hover_btn2">
                    <div class= "hover_btn2" >
                        <div class="tab-pane fade" id="tab1default"  >
                            <div class="flex ">
                                        <ul class="nav nav-tabs">
                                            <li data-toggle="tab"><span
                                                        class="btn btn-info">1</span></li>
                                        </ul>
                              
                                <div class=" panel-default">
                                        <ul class="nav nav-tabs">
                                            <li a id="login_btn"><span class="btn btn-info" data-target="#signin" data-toggle="modal">2</span></a>
                                        </li>
                                        </ul>
                                    <div class="modal fade" id="signin" role="dialog">
                                        <div class="modal-body">
                                        <div class="well">
                                            <ul class="nav nav-tabs">
                                                <li class="active"><a id="login_tab" href="#login" data-toggle="tab">3</a></li>
                                                <li class=""><a id="create_tab" href="#create" data-toggle="tab">Reviews</a></li>
                                                <li class=""><a id="create1_tab" href="#create1" data-toggle="tab">Workflows</a></li>
                                            </ul>
                            
                                            <div id="myTabContent" class="tab-content ">
                                                <div class="tab-pane active in" id="login">
                                               <iframe src= "" style="border:none;width:1450px;height:600px;" >
                                           
                                               </iframe>     
                                                </div>
                                                <div class="tab-pane fade.in" id="create">
                                                 <p>
                                                 hello
                                                 </p>
                                                </div>
                                                <div class="tab-pane fade.in" id="create1">
                                                 <p>
                                                 hellosss
                                                 </p>
                                                </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-danger" data-dismiss="modal" >Cancel</button>
                                    </div>
                                </div>
                            </div>    

                                   
                                </div>
                                <div >
                                        <ul class="nav nav-tabs">
                                            <li href="#tab2default3" data-toggle="tab"><span
                                                        class="btn btn-info">4</span></li>
                                        </ul>
                                        <br></br>
                                        <div class="flex tab-pane fade" id="tab2default3">
                                                    <ul class="nav nav-tabs">
                                                        <li href="#tab22default3" data-toggle="tab"><span
                                                                    class="btn btn-info">4</span>
                                                        </li>
                                                    </ul>
                                              
                                                    <ul class="nav nav-tabs">
                                                        <li href="#tab222default3" data-toggle="tab"><span
                                                                    class="btn btn-info">5</span>
                                                        </li>
                                                    </ul>
                                               
                                            </div>
                                        </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tab2default">
                            <div class="flex">
                                <div class="panel with-nav-tabs panel-default">
                                    <div class="panel-heading">
                                        <ul class="nav nav-tabs">
                                            <li><a href="#tab3default1" data-toggle="tab"><span
                                                        class="btn btn-info">6</span></a></li>
                                        </ul>
                                    </div>
                                    <div class="panel-body">
                                        <div class="tab-pane fade" id="tab3default1">
                                            <button class="btn btn-success" data-toggle="modal"
                                                data-target="#myModal7">Workflow</button>
                                            <button class="btn btn-info" data-toggle="modal"
                                                data-target="#myModal8">Reviews</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel with-nav-tabs panel-default">
                                    <div class="panel-heading">
                                        <ul class="nav nav-tabs">
                                            <li><a href="#tab3default2" data-toggle="tab"><span
                                                        class="btn btn-info">7</span></a></li>
                                        </ul>
                                    </div>
                                    <div class="panel-body">
                                        <div class="tab-pane fade" id="tab3default2">
                                            <button class="btn btn-success" data-toggle="modal"
                                                data-target="#myModal9">Workflow</button>
                                            <button class="btn btn-info" data-toggle="modal"
                                                data-target="#myModal10">Reviews</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel with-nav-tabs panel-default">
                                    <div class="panel-heading">
                                        <ul class="nav nav-tabs">
                                            <li><a href="#tab3default3" data-toggle="tab"><span
                                                        class="btn btn-info">8</span></a></li>
                                        </ul>
                                    </div>
                                    <div class="panel-body">
                                        <div class="tab-pane fade" id="tab3default3">
                                            <button class="btn btn-success" data-toggle="modal"
                                                data-target="#myModal11">Workflow</button>
                                            <button class="btn btn-info" data-toggle="modal"
                                                data-target="#myModal12">Reviews</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tab3default">
                            <div class="flex">
                          
                                <div class="panel with-nav-tabs panel-default">
                                    <div class="panel-heading">
                                        <ul class="nav nav-tabs">
                                            <li><a href="#tab5default2" data-toggle="tab"><span
                                                        class="btn btn-info">9</span></a></li>
                                        </ul>
                                    </div>
                                    <div class="panel-body">
                                        <div class="tab-pane fade" id="tab5default2">
                                            <button class="btn btn-success" data-toggle="modal"
                                                data-target="#myModal21">Workflow</button>
                                            <button class="btn btn-info" data-toggle="modal"
                                                data-target="#myModal22">Reviews</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel with-nav-tabs panel-default">
                                    <div class="panel-heading">
                                        <ul class="nav nav-tabs">
                                            <li><a href="#tab5default3" data-toggle="tab"><span
                                                        class="btn btn-info">10</span></a></li>
                                        </ul>
                                    </div>
                                    <div class="panel-body">
                                        <div class="tab-pane fade" id="tab5default3">
                                            <button class="btn btn-success" data-toggle="modal"
                                                data-target="#myModal23">Workflow</button>
                                            <button class="btn btn-info" data-toggle="modal"
                                                data-target="#myModal24">Reviews</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tab4default">
                            <div class="flex">
                                <div class="panel with-nav-tabs panel-default">
                                    <div class="panel-heading">
                                        <ul class="nav nav-tabs">
                                            <li><a href="#tab6default1" data-toggle="tab"><span
                                                        class="btn btn-info">11</span></a></li>
                                        </ul>
                                    </div>
                                    <div class="panel-body">
                                        <div class="tab-pane fade" id="tab6default1">
                                            <button class="btn btn-success" data-toggle="modal"
                                                data-target="#myModal25">Workflow</button>
                                            <button class="btn btn-info" data-toggle="modal"
                                                data-target="#myModal26">Reviews</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel with-nav-tabs panel-default">
                                    <div class="panel-heading">
                                        <ul class="nav nav-tabs">
                                            <li><a href="#tab6default2" data-toggle="tab"><span
                                                        class="btn btn-info">12</span></a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="panel-body">
                                        <div class="tab-pane fade" id="tab6default2">
                                            <button class="btn btn-success" data-toggle="modal"
                                                data-target="#myModal27">Workflow</button>
                                            <button class="btn btn-info" data-toggle="modal"
                                                data-target="#myModal28">Reviews</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel with-nav-tabs panel-default">
                                    <div class="panel-heading">
                                        <ul class="nav nav-tabs">
                                            <li><a href="#tab6default3" data-toggle="tab"><span
                                                        class="btn btn-info">13</span></a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="panel-body">
                                        <div class="tab-pane fade" id="tab6default3">
                                            <button class="btn btn-success" data-toggle="modal"
                                                data-target="#myModal29">Workflow</button>
                                            <button class="btn btn-info" data-toggle="modal"
                                                data-target="#myModal30">Reviews</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
</main>
</body>
</html>

Итак, наведение курсора выполняет работу для наведения и размытия, и то, и другое, поэтому одно решение, если вы хотите его использовать .наведите указатель мыши, чтобы использовать класс toggleClass с классом, имеющим непрозрачность 0 (класс toggleClass добавляет класс, если его нет, и удаляет его, если он существует)

Во-вторых, ваш запрос был выбран на чем-то вроде #tab2default1, после 5 минут поиска я обнаружил, что он не существует

Мое решение здесь: я использовал 2 функции, одну для mouseenter, а другую для mouseleave (у вас она уже была)

Комментарии:

1. именно то, что я искал!

2. Хорошо, позвольте мне отредактировать мое сообщение, чтобы рассказать вам, что я изменил тогда 🙂

3. Держи! 🙂

4. у меня был #tab2default1, потому что я хотел расширить функциональность наведения на все кнопки, которые отображаются при первом запуске кода. могу ли я сделать это с учетом изменений, которые вы внесли, просто изменив идентификационные данные? или, может быть, вы могли бы подсказать мне какой-нибудь другой способ?

5. Извините, я не понимаю, вы говорите о кнопках a, b , c, d? все они должны всплывать, когда вы вводите мышью элемент воды? если это так, вы можете просто добавить непрозрачность ко всем из них в функции mouseenter да, если она исходит от другой кнопки, просто возьмите идентификатор другой кнопки и выполните вторую функцию, аналогичную другим идентификаторам,

Метки: