Home/ Questions/Q 8328851
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T01:34:27+00:00

Please help me with the following code. I can use images for creating the

  • 0

Please help me with the following code. I can use images for creating the circular menus and make it simple for me, but I want to use CSS and Jquery to make the page super fast and also learn something from this project. What I want to do is change(animate) the color of the circular shape that is around the hovered menu item. I think the code is very much self explaining, but if anything is not clear, let me know.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.color.min.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
        var itemnumber = '';
        $('#menu li').hover(function () {
            itemnumber = '#item' + $(this).text();
            $(itemnumber).animate({color: "#abcdef"}, 1000);

        }).mouseleave(function () {
            $(itemnumber).animate({color: "#B1AC8F"}, 1000);
        });
        }); 
</script>
<style type="text/css">
    body {
        width: 810px;
        height: 800px;
        background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -o-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(255,255,255)),color-stop(0.34, rgb(206,203,183)),color-stop(0.82, rgb(177,172,143)));
    }

    #menu ul { list-style:none; }
    #logo { width:250px; margin:0 285px; }
    .circle { width: 150px; height: 150px; background: transparent; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; border:10px; border-style:solid; color:#B8A36E; }
    .oval { margin: 0.5px 10px; width: 130px; height: 50px; background: #B8A36E; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }
    #itempic {position:relative; margin: -1px -12px; z-index:-1;}
    #item1 {position:absolute; left: 160px; top:170px; }
    #item2 {position:absolute; left: 335px; top:170px; }
    #item3 {position:absolute; left: 510px; top:170px; }
    #item4 {position:absolute; left: 245px; top:325px; }
    #item5 {position:absolute; left: 420px; top:325px; }
    #item6 {position:absolute; left: 160px; top:480px; }
    #item7 {position:absolute; left: 335px; top:480px; }
    #item8 {position:absolute; left: 510px; top:480px; }
    #item9 {position:absolute; left: 245px; top:635px; }
    #item10 {position:absolute; left: 420px; top:635px; }
</style>
</head>

<body>
<img id="logo" src="logo.png">
<div id="menu">
<ul>
    <li><div class="circle" id="item1"><div class="oval"><img id="itempic" src="Item1.png"></div></div></li>
    <li><div class="circle" id="item2"><div class="oval"><img id="itempic" src="Item2.png"></div></div></li>
    <li><div class="circle" id="item3"><div class="oval"><img id="itempic" src="Item3.png"></div></div></li>
    <li><div class="circle" id="item4"><div class="oval"><img id="itempic" src="Item4.png"></div></div></li>
    <li><div class="circle" id="item5"><div class="oval"><img id="itempic" src="Item5.png"></div></div></li>
    <li><div class="circle" id="item6"><div class="oval"><img id="itempic" src="Item1.png"></div></div></li>
    <li><div class="circle" id="item7"><div class="oval"><img id="itempic" src="Item2.png"></div></div></li>
    <li><div class="circle" id="item8"><div class="oval"><img id="itempic" src="Item3.png"></div></div></li>
    <li><div class="circle" id="item9"><div class="oval"><img id="itempic" src="Item4.png"></div></div></li>
    <li><div class="circle" id="item10"><div class="oval"><img id="itempic" src="Item5.png"></div></div></li>
</ul>
</div>
</body>
</html>

I have found out the issue.. thanks for help guys!

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.color.min.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
        var itemnumber = '';
        var itemoval = '';
        $('#menu li').hover(function () {
            itemnumber = '#item' + ($('#menu li').index(this) + 1);
            itemoval = itemnumber + '-oval';
            $(itemnumber).animate({color: "#F97780"}, 500);
            $(itemoval).animate({backgroundColor: "#F97780"}, 500);
        }).mouseleave(function () {
            $(itemnumber).animate({color: "#B8A36E"}, 500);
            $(itemoval).animate({backgroundColor: "#B8A36E"}, 500);
        });
        }); 
</script>
<style type="text/css">
    body {
        width: 810px;
        height: 800px;
        background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -o-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(255,255,255)),color-stop(0.34, rgb(206,203,183)),color-stop(0.82, rgb(177,172,143)));
    }

    #menu ul { list-style:none; }
    #logo { width:250px; margin:0 285px; }
    .circle { width: 150px; height: 150px; background: transparent; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; border:10px; border-style:solid; color:#B8A36E; }
    .oval { z-index:-1; margin: 0.5px 10px; width: 130px; height: 50px; background: #B8A36E; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }
    #itempic {position:relative; margin: -1px -12px; z-index:-1;}
    #item1 {position:absolute; left: 160px; top:170px; }
    #item2 {position:absolute; left: 335px; top:170px; }
    #item3 {position:absolute; left: 510px; top:170px; }
    #item4 {position:absolute; left: 245px; top:325px; }
    #item5 {position:absolute; left: 420px; top:325px; }
    #item6 {position:absolute; left: 160px; top:480px; }
    #item7 {position:absolute; left: 335px; top:480px; }
    #item8 {position:absolute; left: 510px; top:480px; }
    #item9 {position:absolute; left: 245px; top:635px; }
    #item10 {position:absolute; left: 420px; top:635px; }
</style>
</head>

<body>
<img id="logo" src="logo.png">
<div id="menu">
<ul>
    <li><div class="circle" id="item1"><div class="oval" id="item1-oval"><img id="itempic" src="Item1.png"></div></div></li>
    <li><div class="circle" id="item2"><div class="oval" id="item2-oval"><img id="itempic" src="Item2.png"></div></div></li>
    <li><div class="circle" id="item3"><div class="oval" id="item3-oval"><img id="itempic" src="Item3.png"></div></div></li>
    <li><div class="circle" id="item4"><div class="oval" id="item4-oval"><img id="itempic" src="Item4.png"></div></div></li>
    <li><div class="circle" id="item5"><div class="oval" id="item5-oval"><img id="itempic" src="Item5.png"></div></div></li>
    <li><div class="circle" id="item6"><div class="oval" id="item6-oval"><img id="itempic" src="Item1.png"></div></div></li>
    <li><div class="circle" id="item7"><div class="oval" id="item7-oval"><img id="itempic" src="Item2.png"></div></div></li>
    <li><div class="circle" id="item8"><div class="oval" id="item8-oval"><img id="itempic" src="Item3.png"></div></div></li>
    <li><div class="circle" id="item9"><div class="oval" id="item9-oval"><img id="itempic" src="Item4.png"></div></div></li>
    <li><div class="circle" id="item10"><div class="oval" id="item10-oval"><img id="itempic" src="Item5.png"></div></div></li>
</ul>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Give this a look: http://jsfiddle.net/ufomammut66/ZsX8e/

    I changed your hover event to a mouseenter event. If you change it back to hover in the jsfiddle you’ll notice the ‘in’ logging statement will fire twice (look for the console.log statements I left in) on the way out, which we don’t want.

    I also changed the jquery selector to your circle class. I did this because it seems like since you can’t see the li element (tho that could just be the lack of images) you’d want it to fire on entering the circle element.

    It wasn’t clear to me what you’re trying to use itemnumber for, but it seemed like you’re trying to reconstruct the circle elements ID to select it. We don’t need to do this because the this element will refer to the current element we’re entering or leaving.

    Note: I assume you’re using this: http://www.bitstorm.org/jquery/color-animation/ as your jquery.color.min.jsimport. The jsFiddle has this imported to work.

    Hope this helps.

    • 0