如何用javascript模拟css悬停按钮?(没有jquery)
How to simulate css hover pressing a button with javascript? (no jquery)
如何用javascript模拟css悬停按钮?(纯JS-nojquery)
当"悬停"在div"test"上时,会有几个变化。我还想按下或鼠标悬停一个按钮,模拟该分区上的"悬停"
示例:http://jsfiddle.net/yFgh5/更新:http://jsfiddle.net/yFgh5/6/
HTML:
<div class="test1">red to yellow</div>
<div class="test2">green to blue</div>
<div class="test3">text text text text text</div>
<input type="button" onclick"simulate(document.getElementById('test1'), 'mouseover');" value="Submit" />
CSS:
.test1 { background:red; }
.test2 { background:green; }
.test3 { font-size:13px; }
.test1:hover { background:yellow; }
.test1:hover ~ .test2 { background:blue; }
.test1:hover ~ .test3 { font-size:20px; }
JAVASCRIPT:
function simulate(element, eventName)
{
var options = extend(defaultOptions, arguments[2] || {});
var oEvent, eventType = null;
for (var name in eventMatchers)
{
if (eventMatchers[name].test(eventName)) { eventType = name; break; }
}
if (!eventType)
throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported');
if (document.createEvent)
{
oEvent = document.createEvent(eventType);
if (eventType == 'HTMLEvents')
{
oEvent.initEvent(eventName, options.bubbles, options.cancelable);
}
else
{
oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
}
element.dispatchEvent(oEvent);
}
else
{
options.clientX = options.pointerX;
options.clientY = options.pointerY;
var evt = document.createEventObject();
oEvent = extend(evt, options);
element.fireEvent('on' + eventName, oEvent);
}
return element;
}
function extend(destination, source) {
for (var property in source)
destination[property] = source[property];
return destination;
}
var eventMatchers = {
'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,
'MouseEvents': /^(?:click|dblclick|mouse(?:down|up|over|move|out))$/
}
var defaultOptions = {
pointerX: 0,
pointerY: 0,
button: 0,
ctrlKey: false,
altKey: false,
shiftKey: false,
metaKey: false,
bubbles: true,
cancelable: true
}
困难在于此。当"鼠标悬停"在按钮上时(div结构全部向下),这应该模拟顶部div的"css悬停",在本例中为"test1"。也就是说,将鼠标悬停在按钮上,并将"css悬停"模拟为"test1"
我希望我能正确理解你的观点。
JS
var t = document.getElementsByClassName('test1')[0];
var b = document.getElementsByTagName('input')[0];
t.onmouseover = function(e){
this.className += ' testHover';
}
t.onmouseout = function(e){
this.className = this.className.replace(' testHover','');
}
b.onmouseover = function(e){
var p = document.getElementsByClassName('test1')[0];
p.className += ' testHover';
}
b.onmouseout = function(e){
var p = document.getElementsByClassName('test1')[0];
p.className = p.className.replace(' testHover','');
}
工作Fiddle
上述目标形式的代码:
var obj = {
initialize: function () {
this.t = document.getElementsByClassName('test1')[0],
this.b = document.getElementsByTagName('input')[0]
this.attachEvents();
},
addClass: function () {
this.t.className += ' testHover';
},
removeClass: function () {
this.t.className = this.t.className.replace(' testHover', '');
},
attachEvents: function () {
var t = this.t;
var b = this.b;
t.onmouseover = this.addClass.bind(this);
t.onmouseout = this.removeClass.bind(this);
b.onmouseover = this.addClass.bind(this);
b.onmouseout = this.removeClass.bind(this);
}
};
obj.initialize();
工作Fiddle
为什么不模拟悬停只是添加(和删除)一个类?
你可以这样定义一个类:
.test1:hover, .test1.hover {
background:yellow;
}
然后根据需要添加和删除event上的类。
然而,除非你有一些障碍,jQuery是更快的方法!
相关文章:
- 在Widget代码中没有jQuery的情况下,用光标图像从左滑动到右
- 如何在javascript中找到分配给元素的类(没有jQuery)
- 如何在没有jquery的情况下使用Papa Parse
- -webkit转换在JavaScript旋转动画中不起作用(没有JQuery)
- 有人知道有没有jquery插件可以在图像上写文本,并让用户将其放置在图像内的任何位置
- 如何在没有jQuery的情况下模拟按名称命名的事件或解除单个事件的绑定
- 如何在没有表单提交、没有js、没有jquery和没有ajax的情况下将输入的文本框值存储到php变量中
- 如何用javascript发送多个文件没有jQuery我想要每个文件一个进度条
- 如果视图中没有Jquery脚本引用,Unobtrusive Javascript Validation是不起作用的
- 如何在没有JQuery的情况下正确实现无限滚动的AngularJS表
- 如何在没有JQuery的情况下在Javascript中获取文件的内容
- Javascript 滑动图片库 - 没有 jQuery
- Sidr.js相当于没有jQuery的AngularJS
- 如何在没有JQuery的情况下,通过对服务器的基本ajax调用,根据浏览器上的用户活动保持服务器会话活动
- 如何使用AJAX打印PHP POST数据?(没有jQuery)
- Javascript在没有jQuery的情况下获取X父节点
- 如何将DOM元素扩展为类(没有jQuery)
- 如果检查了输入,则将类应用于<身体>,没有jQuery
- 使用ajax提交邮件表单的正确方法?-没有JQuery
- 在没有 jquery 的情况下更改子节点(父节点具有 ID)中的链接文本