CODEWITHSUNDEEP
javascriptjquerycsshover
Emad
Emad

Reputation: 11

Simulating hover for a menu

I have a menu with a CSS to make each item blur on hover :

    {<style>
a.blur
{
text-decoration: none;
color: #128;
}

a.blur:hover, a.blur:focus
{
    text-decoration: underline;
    color: #933;
}

.textshadow a.blur, .textshadow a.blur:hover, .textshadow a.blur:focus
{
    text-decoration: none;
    color: rgba(0,0,0,0);
    outline: 0 none;
    -webkit-transition: 100ms ease 50ms;
    -moz-transition: 100ms ease 50ms;
    transition: 100ms ease 50ms;
}

.textshadow a.blur,
.textshadow a.blur.out:hover, .textshadow a.blur.out:focus
{
    text-shadow: 0 0 4px #989898;
    font-size:24px;
}

.textshadow a.blur.out,
.textshadow a.blur:hover, .textshadow a.blur:focus
{
    text-shadow: 0 0 0 #000;
}
</style>}

now each item blurs on hover, my question is, is there any way to make OTHER items blur while the one being hovered stays focused ?? .. i don't want all the items to be initially blurred though, they all should be normal, until an item gets hovered then all others get blurred and on mouseleave, they all should be focused and normal again.

thanks

Upvotes: 1

Views: 54

Answers (2)

Eric Guan
Eric Guan

Reputation: 15992

Sure you can, with jQuery it's a breeze.

jsFiddle: http://jsfiddle.net/7ytnb118/

$('ul li').on('mouseover',function(){
    $('ul li').not($(this)).css('text-shadow',' 2px 2px #989898');
  })

  $('ul li').on('mouseout',function(){
    $('ul li').not($(this)).css('text-shadow','none');
  })

If you've never seen jQuery before the code may look a bit cryptic, but once you get the hang of it, it's a bit like experiencing nirvana.

The simple explanation is that each li has a hover listener. On hover, every li except the one that was hovered onto will get blurred. The true is same for unhovering, aka mousing off.

Upvotes: 1

Branden Keck
Branden Keck

Reputation: 572

I think what you would be looking for is the jquery mouseover events:

http://www.w3schools.com/jquery/event_mouseover.asp

And from there you can edit the Style of the element... The coded example in that tutorial gives:

$("p").mouseover(function(){
    $("p").css("background-color", "yellow");
});

Your code would probably look like

$("a").mouseover(function(){
    $("body").css("text-shadow", "0 0 0 #000");
});

I am not familiar with the blur style attibutes, but I hope this answers your question...

Upvotes: 1

Related Questions