Подсветка мыши

by vovkasolovev

HTML

<div id="layout">
    <div class="body">
        <div id="header">
            <div class="inner">
                <div id="toolbar">
                    <p class="info"></p>
                </div>
            </div>
            <div class="inner">
                <div id="menu">
                    <ul class="menu">
                        <li class="nav">
                            <ul>
                                <li id="item_portfolio"><a href="/portfolio"><div class="item">Портфолио</div></a>

                                </li>
                                <li id="item_wedo"><a href="/service"><div class="item">Услуги</div></a>

                                </li>
                                <li id="item_weare"><a href="/about"><div class="item">О нас</div></a>

                                </li>
                                <li id="item_blog"><a href="/blog"><div class="item">Блог</div></a>

                                </li>
                                <li class="selected" id="item_solutions"><a href="/solutions"><div class="item">Разумные решения</div></a>

                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

#layout {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    min-height: 100%;
    margin: 0 auto;
}
.body {
    position: relative;
    padding: 0px;
    margin: 0px;
    background-repeat: repeat-x;
    background-position: left top;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
#header {
    width: 100%;
    padding: 0;
}

.inner {
    position: relative;
    margin: 0px auto;
    padding: 0 5%;
}
#toolbar {
    height: 30px
}
#menu {
    position: relative;
    margin: 0;
    border-radius: 0px;
    width: 100%;
    line-height: 0;
    background: #1e1e1e;
    background: #0077ff;
    box-shadow: 0 0 0 1px rgba(242, 242, 242, 0.3), 0 4px 40px 0 rgba(0, 0, 0, 0.15);
    padding: 0;
}

#menu .item {
    position: relative;
    padding: 10px 15px;
    margin: 0;
    line-height: 44px;
    height: 44px;
    white-space: nowrap;
}
#menu ul li {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 1em;
    line-height: 0;
    vertical-align: middle;
}
#menu a, #menu a:hover, #menu button:hover {
    color: white;}

JavaScript

$(document).ready(function () {
    $(function () {
        var BG = $(".item").css("background-color"),
            x, y, xy, bgWebKit, bgMoz,
            //fromColor = 'rgba(40, 180, 255, 1)',
            fromColor = 'rgba(150, 255, 255, 0.5)',
            toColor = 'rgba(255, 255, 255, 0)',
            //toColor = 'rgba(00, 119, 255, 0.0)',
            gradientSize = 100,
			item = $('.item');

		item.mousemove(function (e) {
			var offset = $(this).offset();
			//x  = e.pageX - this.offsetLeft - ($('.inner').outerWidth() - $('.inner').width())/2;
			x  = e.pageX - offset.left;
			y  = e.pageY - offset.top;
			//y  =$(this).outerHeight()/2;
			// РАБОТАЕТ ДЛЯ МЕНЮ y  = e.pageY - this.offsetTop - $('#menu').offset().top;

            xy = x + " " + y;
			
            bgWebKitOld = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", " + gradientSize + ", from(" + fromColor + "), to(" + toColor + ")), " + BG;
			
            radial_gradient = "radial-gradient(" + x + "px " + y + "px 45deg, circle, " + fromColor + "0%, " + toColor + " " + gradientSize + "px)";
			bgWebKit = "-webkit-" + radial_gradient;
			bgMoz = "-moz-" + radial_gradient;
			bgMS = "-ms-" + radial_gradient;
			bgO = "-o-" + radial_gradient;
			
            $(this).css({ background: bgWebKitOld}).css({background: bgWebKit}).css({background: bgMoz}).css({background: bgMS}).css({background: bgO}).css({background: radial_gradient});
			
        }).mouseleave(function () {
            $(this).css('background', '');
        });
    });
});