CODEWITHSUNDEEP
javascriptphpmouseenter
user3129452
user3129452

Reputation: 65

How to do things to a element on mouseenter?

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"
}

Upvotes: 0

Views: 125

Answers (5)

PRAISER
PRAISER

Reputation: 803

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)

Upvotes: 1

SaschaP
SaschaP

Reputation: 889

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";
}

Upvotes: 1

shawty
shawty

Reputation: 5829

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

Upvotes: 1

Chris
Chris

Reputation: 137058

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;
}

Upvotes: 1

Abraham Hamidi
Abraham Hamidi

Reputation: 13809

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.

Upvotes: 1

Related Questions