vue 移入显示_jQuery/Vue的鼠标移入移出效果

这篇文章主要介绍了关于jQuery/Vue的鼠标移入移出效果 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

实现思路

1、根据鼠标的位置定位在元素内出现的方向

2、根据方向动态设置遮罩层样式

3、设置动画移动遮罩层

jQuery版

jQuery插件可以通过$.fn.extend方法进行拓展。

html

mouse hover

mouse hover

mouse hover

mouse hover

mouse hover

mouse hover

css.container {

width: 600px;

margin: auto;

margin-top: 100px;

}

.content {

float: left;

position: relative;

height: 150px;

width: 150px;

margin: 20px;

overflow: hidden;

background: #ccc;

}

.content .shade {

position: absolute;

top: 0;

display: none;

width: 100%;

height: 100%;

line-height: 100px;

color: #fff;

background: rgba(0, 0, 0, 0.7);

}

js

(function ($) {

$.fn.extend({

"mouseMove": function (child) {

$(this).hover(function (e) {

$this = $(this);

var ele = $this.find(child);

var clientX = e.clientX;

var clientY = e.clientY;

var top = parseInt($this.offset().top);

var bottom = parseInt(top + $this.height());

var left = parseInt($this.offset().left);

<