Question

我想触发不透明度转换。如果元素被光标悬停，光标将淡出，更改其背景图像，然后再次淡入。我想通过添加和删除css类来实现这一目标。它不起作用，出了什么问题？

HTML

<div class="wrapper">
   <div class="cursor">
   </div>
   <div id="grey">
   </div>
</div>

CSS

.wrapper {
width: 100%;
height: 100%;
background-color: lightgrey;
padding: 60px;    
cursor: none;
}

#grey {
width: 100px;
height: 100px;
background: grey;

}

.cursor {
position: fixed;
width: 20px;
height: 20px;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity .3s; /* Safari */
transition: opacity .3s;
}

.red {
background: red;
opacity: 1;
}

.green {
background: green;
opacity: 1;
}

JS

  $('.wrapper').on('mousemove', function(e){
        $('.cursor').css('left', e.clientX-10).css('top', e.clientY -10);
       if ($.contains($('.wrapper')[0], e.target)){

        $('.cursor').removeClass('green').addClass('red');
    }else{
        $('.cursor').removeClass('red').addClass('green');
    }  
});

Answer 1

<强> DEMO HERE

好的，你走了。您需要跟踪已经部分实现的两件事情，并等待fadeOut完成并添加回调以添加和删除相应的class

游标是否已输入元素



游标是否已离开元素

以下是你实际可以做到的事情。

var entered=false;//global variables to show the position of cursor
var left=false;
$('.wrapper').on('mousemove', function(e){
    $('.cursor').css('left', e.clientX-10).css('top', e.clientY -10);
    if ($.contains($('.wrapper')[0], e.target)){
        if(!entered)
        {
            //just to do it once and not on every mousemove you need to check here whether 
            //it has already entered and moving inside the element
            entered=true;
            left=false;//to check the vice versa operation
            $('.cursor').fadeOut('fast',function(){
                //callback function after fadeOut completes
                $(this).removeClass('green').addClass('red');
            }).fadeIn('fast');
        }
    }else{
        if(!left)
        {
            left=true;
            entered=false;
            //same goes here too
            $('.cursor').fadeOut('fast',function(){
                $(this).removeClass('red').addClass('green');
            }).fadeIn('fast');
        }
    }  
});

Answer 2

你必须改变背景颜色，而不是不透明度（不透明度总是1）

CSS

.cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    pointer-events: none;
    opacity: 0;
    -webkit-transition: background-color .3s; /* Safari */
    transition: background-color .3s ;
}

.red {
    background-color: red;
    opacity: 1;
}

.green {
    background-color: green;
    opacity: 1;
}

Answer 3

所以你说你的问题是错的，它是＆＃34;不，我只是让它变得更容易，实际上它是一个背景图像＆＃34; - 所以你在两个背景图像之间转换。

以下是您的操作方法：

你不能在ONE element / div
你必须制作两个div，每个div有一个背景
将要淡出的div的zIndex增加一个
淡出div，而新div保持在<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/card" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_gravity="center" android:clickable="false" app:cardBackgroundColor="@android:color/white" app:cardElevation="2dp" app:cardPreventCornerOverlap="false" app:cardUseCompatPadding="false"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/wholeview" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:weightSum="2"> <ListView android:id="@+id/listView1" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" />  <ListView android:id="@+id/list" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true"> <Button android:id="@+id/findSelected" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal|center" android:text="Next" android:textColor="@android:color/white" /> </LinearLayout> </RelativeLayout>

鼠标输入和输出

3 个答案: