Как имитировать css hover, нажав кнопку с javascript? (PURE JS - NO JQUERY)
Когда "наведите" на div "test" несколько изменений. Я хочу также нажать или навести курсор мыши на кнопку, которая имитирует "зависание" на этом div.
Пример: http://jsfiddle.net/yFgh5/ UPDATE: 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
}
Трудность в этом. Когда "наведение мыши" на кнопку (структура divs все вниз), это должно имитировать "css hover" верхний div, в данном случае "test1". То есть наведите курсор на кнопку и смоделируйте "css hover" на "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','');
}
Вышеприведенный код в виде объекта:
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();
Почему бы вам не моделировать зависание, просто добавляя (и удаляя) класс?
Вы можете определить класс следующим образом:
.test1:hover, .test1.hover {
background:yellow;
}
а затем добавьте и удалите класс по событию по мере необходимости.
Однако, если у вас есть какие-то препятствия, jQuery - это более быстрый способ!