PC上でホバリング可能だが他のデバイスメニューでクリック可能

私はドロップダウンメニューのためにTwitter Bootstrapを使用していましたが、問題は私がOnClickトグルの代わりにメニューをホバリング可能にしたことです、このメニューを作る可能な方法はありますか？それが他のタッチデバイス上でのみホバリング可能になる前のようでしたか？PC上でホバリング可能だが他のデバイスメニューでクリック可能

基本的なブートストラップコードでHOVERABLE

<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
</head> 
<nav class="navbar navbar-toggleable-md navbar-light"> 
    <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
     <ul class="navbar-nav"> 
      <li class="dropdown"> 
       <a class="nav-link dropdown" href="#"> 
      Dropdown link 
     </a> 
       <div class="dropdown-menu"> 
        <a class="dropdown-item" href="#">1</a> 
        <a class="dropdown-item" href="#">2</a> 
        <a class="dropdown-item" href="#">3</a> 
        <a class="dropdown-item" href="#">4</a> 
        <a class="dropdown-item" href="#">5</a> 
       </div> 
      </li> 
     </ul> 
    </div> 
</nav> 

<style> 
    .dropdown-menu {} 

    .dropdown:hover .dropdown-menu { 
     display: block; 
     margin-top: 0; 
    } 
</style>

、我々はタッチデバイス上で再びそれを基本にすることが可能である場合ので、私は思っていたdata-toggle="dropdown"とid="dropdownMenuButton" aria-labelledby="dropdownMenuButton"

を入れて！

出典

2017-01-31 Calibur Victorious

あなたは、ブートストラップがするようにCSSで@mediaクエリと同じブレークポイントを使用して、唯一の非モバイルデバイスのブレークポイントにhoverを適用することができます。

@media only screen and (min-width : 320px) { 
    /* Custom, iPhone Retina */  
} 

@media only screen and (min-width : 480px) { 
    /* Extra Small Devices, Phones */ 
} 

@media only screen and (min-width : 768px) { 
    /* Small Devices, Tablets */ 
} 

/* Medium Devices, Desktops, Large Devices, Wide Screens */ 
@media only screen and (min-width : 992px) { 
    .dropdown:hover .dropdown-menu { 
     display: block; 
     margin-top: 0; 
    } 
}

これは、ブートストラップ3ブレークポイントに基づいています。これは、992pxより広いホバーだけが画面に反映されるようにします。

出典

2017-01-31 15:10:38

私は実際にこのメディアクエリについて何も学んでいませんでした。複数のスタイルが必要な場合は、各クエリのCSSコードを入力するはずです。これらのクエリを使用して幅の異なるものを変更できますか？最後にすべてのページにこれらのクエリを入れなければなりませんか？ –

これは私の理解からホバリングがモバイルデバイス（ブラウザに依存）のためにちょっと違って動作するので、これを行うのにも非常に意味があります。モバイルデバイスでは、最初のタップはホバーとして機能し、2番目のタップは選択として機能します。かなり頻繁にあなたが本当に望むものではありません。 – Alan

メディアクエリは基本的に、各ピクセル幅（別のプロパティでもよい）の間隔に特定のCSSプロパティを定義することを可能にします。ここではリンクhttp://www.w3schools.com/css/css_rwd_mediaqueries.asp – Alan

PC上でホバリング可能だが他のデバイスメニューでクリック可能

答えて

関連する問題