Weirdest problem so far: .is(':hover') doesn't work after getting a php variable?

[johnhuichen]

This is a very strange problem:

The jQuery command (‘:hover’) doesn’t work if I insert this code in the beginning of the php document

<script type="text/javascript">
	var uid = <?php echo $uid; ?>;
</script>

I am able to use $uid from javascript but then the weird thing is that javascript starts to have problem finding if my mouse is hovering over an element?

Update: I found a solution, putting <script>...</script> at the end of the document solved it, but WHY???

Grrrrrr

[Paul_Wilkins]

@johnhuichen

at the end of the document solved it, but WHY???

I think that I have disproved what you think has been happening.

Try out this sample code - it seems to work fine.

<?php
$uid = '12345';
?>
<script type="text/javascript">
    var uid = <?php echo $uid; ?>;
</script>
<style>
p:hover {
    background: green;
}
</style>
<p>Sample text that should get a green background on hover.</p>
<script>
document.body.innerHTML += "<p>UID is " + uid + "</p>";
</script>

[johnhuichen]

Hi Paul, the css works for me as well. It’s the jQuery is(‘:hover’) that doesn’t work

I can test if

$(document).ready(funciton(){
$(document).on('hover','p',function(event){
alert("hover works");
})
})

works later today

[Paul_Wilkins]

Okay - using jquery for simple hover stuff is a bit more work and in this simple example doesn’t seem to be necessary, but here we go.

This test where we use jQuery to change the background color of on-screen elements, including the $uid variable, seems to work fine.

<?php
$uid = '12345';
?>
<script type="text/javascript">
    var uid = <?php echo $uid; ?>;
</script>
<p>Sample text that should get a green background on hover.</p>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
document.body.innerHTML += "<p>UID is " + uid + "</p>";
</script>
<script>
$('p').hover(function () {
	$(this).css('background-color', 'green');
}, function () {
	$(this).css('background-color', '');
});
</script>

Oh hang on, you mention using ‘:hover’ instead - that’s something that I’ll have to come back to tomorrow.

[Paul_Wilkins]

@Paul_Wilkins

Oh hang on, you mention using ‘:hover’ instead - that’s something that I’ll have to come back to tomorrow.

In fact, not tomorrow.

If you look at the jQuery selectors page, you’ll see that jQuery does not support the ‘:hover’ pseudo-selector.

You’ll have to instead do it in one of the other two ways as demonstrated, by the example code above.

[johnhuichen]

Hey Paul, I haven’t been able to come back to this problem since last time I posted, due to a recently deadline I have to meet. But oh boy did you put the problem to the test! I will follow suit and perform similar test tomorrow.

My main purpose in playing around with these codes is actually to use the .is(:hover) function of an object. The hover() seems to work fine with your example, but it doesn’t give you the status of whether something is hovered.

I will do more tests and come back with a good answer.

[Paul_Wilkins]

Well that has nothing to do with the PHP code.

As of jQuery 1.9, the :hover pseudo-selector is no longer supported. There are alternatives though that have ot yet been covered here in this thread.

Here’s what the jQuery 1.9 upgrade documentation has to say about the :hover pseudo-selector.

As of 1.9, the event name string “hover” is no longer supported as a synonym for “mouseenter mouseleave”. This allows applications to attach and trigger a custom “hover” event. Changing existing code is a simple find/replace, and the “hover” pseudo-event is also supported in the jQuery Migrate plugin to simplify migration.

The migrate plugin can be found at https://github.com/jquery/jquery-migrate/

[johnhuichen]

Oh that’s good to know. I swear that is(‘:hover’) was working for me at some point but maybe the expression was bugged.

The reason why I needed to check hover state is because I have three containers, container A inside container B, and lastly container C containing both A and B.

I want A to disappear whenever the user’s mouse leaves B, but it has to stop the behaviour if the user moves mouse from B to A.

I guess if hover is replaced completely by mouseenter and mouseleave, I can create an event for A.mouseenter that will stop event propagation. It’s a workaround that I think can work. If the devs decided to replace hover they must think that mouseenter mouseleave can cover all the functionalities of hovering.

[Paul_Wilkins]

[quote=“johnhuichen, post:8, topic:198652, full:true”]
I want A to disappear whenever the user’s mouse leaves B, but it has to stop the behaviour if the user moves mouse from B to A.

I guess if hover is replaced completely by mouseenter and mouseleave, I can create an event for A.mouseenter that will stop event propagation. [/quote]

What you have there is a common situation, that is solved by using the mouse leave event on B, and using the .parents method to check that you cannot see B.

[johnhuichen]

Thanks Paul!