admin管理员组文章数量:1323342
Here is the scenario:
You have two images and they are stacked on one another. The highest-order z-indexed image is responsible for handling click events (think Google's Map API) and is transparent, while the image below is responsible for a visual representation.
Here is a pseudo-HTML/CSS representation:
div.visual-container {
width: 10px;
height: 10px;
}
div.visual-container:hover {
background-color: #555;
}
div.click-container {
width: 10px;
height: 10px;
}
<div class='lowest'>
<div class='visual-container'></div>
</div>
<div class='highest'>
<div class='click-container'></div>
</div>
Now, when the 'highest' element is clicked, the event is dispatched also on the 'lowest' element.
The basic idea:
function onHoverEventForHighest() {
createMouseEvent(lowest_element, 'mouseover', event);
};
This part is fine and transfers the event accordingly, but it does not seem to invoke the :hover CSS psuedo-class.
Has anyone had any luck with doing something of this nature?
Here is the scenario:
You have two images and they are stacked on one another. The highest-order z-indexed image is responsible for handling click events (think Google's Map API) and is transparent, while the image below is responsible for a visual representation.
Here is a pseudo-HTML/CSS representation:
div.visual-container {
width: 10px;
height: 10px;
}
div.visual-container:hover {
background-color: #555;
}
div.click-container {
width: 10px;
height: 10px;
}
<div class='lowest'>
<div class='visual-container'></div>
</div>
<div class='highest'>
<div class='click-container'></div>
</div>
Now, when the 'highest' element is clicked, the event is dispatched also on the 'lowest' element.
The basic idea:
function onHoverEventForHighest() {
createMouseEvent(lowest_element, 'mouseover', event);
};
This part is fine and transfers the event accordingly, but it does not seem to invoke the :hover CSS psuedo-class.
Has anyone had any luck with doing something of this nature?
Share Improve this question asked Aug 15, 2009 at 22:44 Justin Van HorneJustin Van Horne 1,32211 silver badges15 bronze badges 3-
What exactly doesn't invoke
:hover
? Mousing on to the top-most element? Or are you expecting it to propagate to the bottom-most? Also, is there a specific browser you're having troubles with? – jason Commented Aug 15, 2009 at 22:54 - Creating a DOM event 'mouseover' and invoking it on the desired element does not invoke the element's :hover CSS pseudo-class. There isn't a specific browser. – Justin Van Horne Commented Aug 15, 2009 at 23:01
- So, yeah, basically it is not propagating in the way I want it to. It does call the mouseover event, but it does not invoke :hover. – Justin Van Horne Commented Aug 15, 2009 at 23:14
2 Answers
Reset to default 8The :hover
pseudo-class is not necessarily known for its reliability. Also, there's no way (that I know of) to control its behaviour via Javascript.
According to the W3C's spec, the :hover
pseudo-class should only be applied when the user initiates the action. Quote:
The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class.
So, your best best, in this situation, would be to apply a concrete class (let's say .hover
) via a function bound to the mouseover
and mouseout
events of the desired target elements.
As an aside, you could probably save yourself a lot of hassle if you were to re-structure your markup into a hierarchical/nested form, then the DOM would automatically bubble these events for you. That said, see this SO question and answer on how to manually propagate mouse events through absolutely positioned elements.
Jason's element-nesting ment inspired this:
<style type="text/css">
div.visual-container {
width: 10px;
height: 10px;
}
.widget-container:hover div.visual-container {
background-color: #555;
}
div.click-container {
width: 10px;
height: 10px;
}
</style>
...
<div class="widget-container">
<div class='lowest'>
<div class='visual-container'></div>
</div>
<div class='highest'>
<div class='click-container'></div>
</div>
</div>
This may have been the solution Jason was hinting at. As he said, the DOM doesn't give you control over pseudo-classes, but you don't need the DOM for this. Style-y solutions for style-y problems.
本文标签: htmlInvoking hover pseudoclass by transferring events via JavaScriptStack Overflow
版权声明:本文标题:html - Invoking :hover pseudo-class by transferring events via JavaScript - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742134955a2422328.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论