0

how to execute something on mouse enter? like show in the code down below.

for(x=1; isset($_COOKIE["link$x"]); $x++)
    echo <div id="'.$x.'" OnMouseEnter="myfunction('.$x.')">
}    

and then in javascript

function myfunction(which){
    // doing stuff on id with "which"
}
3
  • sorry for confusing title, i mean mouseenter like the jQuery mouseenter api.jquery.com/mouseenter Jan 11, 2014 at 17:13
  • Wait, do you want to call a function, or change a style? Jan 11, 2014 at 17:14
  • Did any of the answers work?
    – Cilan
    Feb 2, 2014 at 14:10

5 Answers 5

1

onmouseenter is specific to IE, so use onmouseover:

myElement.onmouseover = function()
{
    document.getElementById(which).style.backgroundColor = 'red';
}

yes, it's as simple as that... notice I changed red to 'red', because I don't think you've defined red. This is how to do it in Javascript, though it would be much simpler to do it in CSS with :hover, but you're asking for Javascript.

1

If you just want to apply a style on mouseover, you don't need JavaScript. The CSS :hover pseudo-selector should work fine:

#elementId {
  background: white;
}

#elementId:hover {
  background: red;
}
2
  • :hover doesn't seem to be the same as mouseenter. Jan 11, 2014 at 17:16
  • I tried this first, but then i realize i needed to change another element that i don't hover, the javascript is simplified badly, i'll edit it right now. Jan 11, 2014 at 17:17
1

You don't even have to go that far...

you can do this simply and easily using a :hover pseudo class.

in your css create two rules

.myHoverDiv
{
  /* any styles you need here that show when not hovered over */
}

.myHoverDiv:hover
{
  /* any styles here that should change when the mouse hovers over it */
  background-color: red;
}

then on your tag use

<div class="myHoverDiv"> ... div inner contents here ... </div>

your div's style will change as expected when the mouse is hovered over it

1

As kumar_v asked too, i guess you shoud use "OnMouseOver" instead of "OnMouseEnter" to get a "hover"-effect.

So your PHP-code should be like that:

for($x=1; isset($_COOKIE["link$x"]); $x++) {
    echo '<div id="'.$x.'" OnMouseOver="myfunction('.$x.')">test</div>';
}

and Javascript:

function myfunction(which){
    document.getElementById(which).style.backgroundColor = "red";
}
2
  • This works very good, but when i move my mouse outside i want it to get back like it was before, without the red background Jan 11, 2014 at 17:23
  • Then you also have to write something like that into your <div>-element: OnMouseOut="myfunction_out('.$x.')" and the function myfunction_out(which) { document.getElementById(which).style.backgroundColor = ""; } or a default color of your choice
    – SaschaP
    Jan 11, 2014 at 17:26
1

better you handle your javascript in one block and I suggest you to make a handler to do that for you, if you use common javascript library such as jQuery and mouseover, that becomes super easier to handle and debug, remember add jQuery library to head of page.

server-side:

echo '<div id="handler_id">';
for(x=1; isset($_COOKIE["link$x"]); $x++)
    echo <div id="'.$x.'">
}
echo '</div>';

client-side, this part is in within <script /> tag or in separated js file:

(function(window, $) {
var window.handler = handler = {
    init: function() {
        $('#handler_id > div').mouseover(function(){
            console.log("mouse is over", this);
        });
    }
}
$(function(){ handler.init(); });
})(window, jQuery)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.