JavaScript/CSSホバー機能

Question

バニラJavaScriptやCSSだけで、以下のコードのようなものを作成することは可能でしょうか？また、ボタンをクリックするまでホバーのdivを開いたままにして、元のdivを元に戻すようにします。何かが助けてくれる、歓声！

$(document).ready(function(){ 
 
    $('.up-down').mouseover(function(){ 
 
     $('.default').stop().animate({ 
 
      height: 0  
 
     }, 200);       
 
    }).mouseout(function(){ 
 
     $('.default').stop().animate({ 
 
      height: 200 
 
     }, 200)  
 
    }) 
 

 
});

.up-down { 
 
    overflow:hidden; 
 
    height:200px; 
 
    width:200px; 
 
} 
 
.slide { 
 
    width:200px; 
 
    height:200px; 
 
} 
 
.default { 
 
    background-color:#ccc; 
 
} 
 
.onhover { 
 
    background-color:#1DB7CB; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="up-down"> 
 
<div class="slide default"></div> 
 
<div class="slide onhover"></div> 
 
</div>

Answer 1

コードをバックグラウンドで使用すると、次のようにすることができます。

Jqueryは単なるJavascriptのライブラリです。JqueryはJavascriptで実行できます。もちろん

var updown = document.querySelector('.up-down'); 
 
var def = document.querySelector('.default'); 
 
var btn = document.querySelector('.clickMe'); 
 

 
updown.addEventListener('mouseover', function() { 
 
    def.style.height = '0px'; 
 
}); 
 

 
btn.addEventListener('click', function() { 
 
    def.style.height = '200px'; 
 
});

.up-down { 
 
    overflow:hidden; 
 
    height:200px; 
 
    width:200px; 
 
} 
 
.slide { 
 
    width:200px; 
 
    height:200px; 
 
} 
 
.default { 
 
    background-color:#ccc; 
 
    transition: height .2s linear; 
 
} 
 
.onhover { 
 
    background-color:#1DB7CB; 
 
    
 
}

<div class="up-down"> 
 
    <div class="slide default"></div> 
 
    <div class="slide onhover"><button class="clickMe"> 
 
Click me 
 
</button></div> 
 
</div>

Answer 2

あなたはこのような何かを探していますか？

.up-down { 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
.slide { 
 
    width: 100%; 
 
    height: 100%; 
 
    transition: all 0.5s; 
 
} 
 
.default { 
 
    background: blue; 
 
} 
 
.onhover { 
 
    background: green; 
 
    height: 0%; 
 
} 
 
.up-down:hover .default { 
 
    height: 0%; 
 
} 
 
.up-down:hover .onhover { 
 
    height: 100%; 
 
}

<div class="up-down"> 
 
    <div class="slide default"></div> 
 
    <div class="slide onhover"></div> 
 
</div>

Answer 3

あなたはaddEventListenerでイベントリスナーを追加することができます。

transitionプロパティを使用してアニメーションを実装できるため、高さの変化はすぐに起こるのではなく、ゆっくりと変化します。

あなたの編集のようにボタンを追加しました。

var updown = document.querySelector('.up-down'); 
 
var def = document.querySelector('.default'); 
 
var btn = document.querySelector('#btn'); 
 

 
updown.addEventListener('mouseover', function() { 
 
    def.style.height = '0px'; 
 
}); 
 

 
updown.addEventListener('mouseout', function() { 
 
    def.style.height = '200px'; 
 
}); 
 

 
btn.addEventListener('click', function() { 
 
    var isDown = def.style.height === '200px'; 
 
    def.style.height = isDown ? '0px' : '200px'; 
 
});

.up-down { 
 
    overflow:hidden; 
 
    height:200px; 
 
    width:200px; 
 
} 
 
.slide { 
 
    width:200px; 
 
    height:200px; 
 
} 
 
.default { 
 
    background-color:#ccc; 
 
    transition: height .2s linear; 
 
} 
 
.onhover { 
 
    background-color:#1DB7CB; 
 
    
 
}

<button type="button" id="btn">Toggle</button> 
 
<div class="up-down"> 
 
    <div class="slide default"></div> 
 
    <div class="slide onhover"></div> 
 
    
 
</div>

Answer 4

私がちょうどバニラJavaScriptを使用して、以下のコードで持っているもののようなものを作成することは可能でしょうか？

はい、jqueryで行われたことはすべてjavascriptで実行できます。それは確かであるCSS

で

。バックアップ.onhoverを置くup-downのホバー上

.up-down:hover .onhover { 
    top: 0px; 
} 

：ここでは、だから、多少のコード​​を説明するために

.up-down { 
 
    overflow:hidden; 
 
    height:200px; 
 
    width:200px; 
 
    position: relative; 
 
} 
 
.slide { 
 
    width:200px; 
 
    height:200px; 
 
    position:absolute; 
 
} 
 
.default { 
 
    background-color:#ccc; 
 
} 
 
.onhover { 
 
    background-color:#1DB7CB; 
 
    z-index: 2; 
 
    top: 200px; 
 
    transition: top 0.4s; 
 
} 
 

 
.up-down:hover .onhover { 
 
    top: 0px; 
 
}

<div class="up-down"> 
 
    <div class="slide default"></div> 
 
    <div class="slide onhover"></div> 
 
</div>

を始めるために何かがあります。

.onhover { 
    top: 200px; 
    transition: top 0.4s; 
} 

グレーdivの下の初期位置、transitionは、それはそう:hoverが0.4秒のスパンで行われることができます。

mouseleaveのときにdivを青色にしたい場合は、mouseenterにクラスを追加するだけです。あなたはおそらくまだ純粋なCSSでそれを行うことができますが、私はそれがこれよりも難しいだろうと思います。

.onhover { 
    background-color:#1DB7CB; 
    z-index: 2; 
    top: 200px; 
    transition: top 0.4s; 
} 

addedClass{ 
    top: 0px; 
} 
// target is up-down 
target.addEventListener("mouseenter", e => { 
    // element is your onhover elem 
    element.classList.add("addedClass"); 
}); 

target.addEventListener("click", e => { 
    element.classList.remove(" addedClass"); 
}); 

Answer 5

利用CSS3 transitionのdivの高さの値についてonhoverクラス属性を持つ：

.up-down { 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 

 
.slide { 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.default { 
 
    background-color: #ccc; 
 
} 
 

 
.onhover { 
 
    position: absolute; 
 
    bottom: 0; 
 
    height: 0; 
 
    background-color: #1DB7CB; 
 
    -webkit-transition: height 1s ease-out 0.5s; 
 
    -moz-transition: height 1s ease-out 0.5s; 
 
    -o-transition: height 1s ease-out 0.5s; 
 
    transition: height 1s ease-out 0.5s; 
 
} 
 

 
.up-down:hover .onhover { 
 
    height: 200px; 
 
}

<div class="up-down"> 
 
    <div class="slide onhover"></div> 
 
    <div class="slide default"></div> 
 
</div>

効果方向を変更するには、bottom: 0;の代わりにtop: 0;を使用してください。