简体   繁体   中英

menu on hover make different effect on other div

I have a menu in a div with 5 elements that has 180px of width each element. And I have a line under this, outside this div, that has an image that has to move depend on which element is hovered.

I do this: 5 element with Ids from "#fxmenu_1" to "#fxmenu_5. i have to declare a variable for the number of the id hovered, and move #img with this rule in javascript (Jquery):

margin-left:180px (times #fxmenu_$i) from 1 to 5

I know allmost everything of the code, but the variable $i doesnt work at the end with my code, and i think there has to be something better to write. like a var=$"fxmenu_$i"

This is an Example of the code, there is more in php, but is all i can show you.

    <div id="pmenu">
<ul id="bmenul">
            <li>
                <a  class="brand" id="fxmenu1_" href="/"><img src="/logomenu.png" />LOGO</a>
            </li>
              <li>
                <a  id="fxmenu_2"  href="/team" title="team">The team</a>
              </li>
              <li>
                <a  id="fxmenu_3" href="/services" title="Servicios">Services</a>
              </li>
              <li>
                <a  id="fxmenu_4" href="/projects" title="Proyectos">Projects</a>
              </li>
              <li>
                <a  id="fxmenu_5" href="/contact" title="Contacto">Contact</a>
              </li>
        </ul>
<div id="bar">
    <img id="img" src="/efect.png" />
</div>
</div>

with the css is like this link http://jsfiddle.net/rzJMv/

This is with the jquery but i want to bring back to normal everything when i stop hovering, or if i hover other element to move to this new point.

$(document).ready(function(){
var id;
    $('#fxmenu_'+id+':not(.totalactive)').hover(function (){
        $('#img').animate({"marginTop": "-70px"},1000, function(){
            $('#img').animate({"marginLeft":+(180*id)+"px"},1000, function(){
                $('#img').animate({"marginTop": "-90px"},1000);
                });
        });
    });
});

http://jsfiddle.net/rzJMv/1/

Would have to see more of your code to be sure but typically variables are used in javascript like so 'margin-left:'+(180*i)+'px'

In the case of php, 'margin-left:'+(180*<?php echo $i; ?>)+'px'

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM