元素移动时如何移除悬停状态 [英] How to remove hover state when the element moves

问题描述

我有这个例子：

 < div class =container> 
< div class =bp>< / div> 
< / div> 
  

http://jsfiddle.net/VKwjD/20/

如果你将鼠标悬停在同一个方块上，他的颜色会发生变化;如果你点击，父母的大小会发生变化，所以方块会移动。

我的问题是：如果在点击后不移动鼠标，广场会停留在悬停状态...为什么？
点击后可以删除这个状态吗？没有移动鼠标...

感谢您的帮助

解决方案

HTML：

 < div class =container> 
< div class =bpid =bp>< / div> 
< / div> 
  

CSS：

  .container {
 background：＃FF0000; 
 width：200px; 
 height：200px; 
职位：亲属; 
} 
 .container.hide {
 width：50px; 
} 
 .bp {
 background：＃00FFFF; 
 width：30px; 
 height：30px; 
 top：0px; 
 right：0px; 
位置：绝对; 
光标：指针; 
} 
 .bp：hover {
 background：＃0000FF！important; 
 
  

JavaScript：

<$ （）。$（$。$ b $（'。bp'）。click（function（）{
if（$（'。container ''）.hasClass（'hide'））{
$（'。container'）。removeClass（'hide'）;
var l1 = document.getElementById（'bp'）;
l1.style.background ='＃00FFFF';
}
else {
$（'。container'）。addClass（'hide'）;
var l1 = document。 getElementById（'bp'）;
l1.style.background ='＃0000FF';
}
}）;
}）;

I have this example:

<div class="container">
    <div class="bp"></div>
</div>

http://jsfiddle.net/VKwjD/20/

if you hover the same square, his color changes; if you click, the parent size changes so the square move.

My problem is: If you don't move your mouse after the click, the square stays in the hover state... Why ? It's possible to remove this state after the click? without moving the mouse...

Thank you for your help

解决方案

HTML:

<div class="container">
    <div class="bp" id="bp"></div>
</div>

CSS:

.container {
    background: #FF0000;
    width: 200px;
    height: 200px;
    position: relative;
}    
.container.hide {
    width: 50px; 
}        
.bp {
    background: #00FFFF;
    width: 30px;
    height:30px;
    top:0px;
    right:0px;
    position:absolute;
    cursor: pointer;
}    
.bp:hover{
    background: #0000FF!important;
}

JavaScript:

$(document).ready(function() {
    $('.bp').click(function() {        
        if($('.container').hasClass('hide')) {
            $('.container').removeClass('hide');
            var l1 = document.getElementById('bp');
            l1.style.background = '#00FFFF';            
        }
        else {
            $('.container').addClass('hide');
            var l1 = document.getElementById('bp');
            l1.style.background = '#0000FF';
        }
    });        
});

这篇关于元素移动时如何移除悬停状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！