CODEWITHSUNDEEP
htmlcss
user1038814
user1038814

Reputation: 9657

make full <li> block to behave as link

I have the following <li> and I would like the whole li to behave as a link. Currently, only the text in the span acts as a link. Also, is it possible to change the colour of the text on hover. My code only changes the colour of the text when I hover over it, but stays the same when I hover elsewhere in the block. Any help is appreciated.

I've put the demo on jsfiddle: http://jsfiddle.net/noscirre/JtVGp/4/

Upvotes: 1

Views: 5130

Answers (3)

Dimitri Reifschneider
Dimitri Reifschneider

Reputation: 467

Simply add this style to your navigation:

ul.menu > li > a {
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

This solution does not consider a span tag inside. The HTML looks like this:

<ul class="menu">
    <li><a>Navigation Point 1</a></li>
    <li><a>Navigation Point 2</a></li>
</ul>

Upvotes: 0

Sirko
Sirko

Reputation: 74046

With respect to the changing color, change your last CSS entry from

#app-container ul.apps li:hover a:hover { color: #fff; }

to 

#app-container ul.apps li.app1:hover a { color: #fff; }

To make the whole <li> box behave like a link, you can add an onclick handler via JavaScript to it, e.g., like this:

var li = document.querySelector( '#app-container .app1' );

li.addEventListener( 'click', function(){
   window.location = 'your/new/url';
} );

and maybe change the cursor attribute by using cursor: pointer (MDN link).

Upvotes: 1

Bongs
Bongs

Reputation: 5592

Try this

http://jsfiddle.net/Bongs/JtVGp/5/

I've added class to the link and some css to li and the link...

HTML

<li class="app1"> 
  <a title href="#" class="blocklink">
        <span>ANOTHER APP</span>
  </a> 
</li>

CSS

.app1 {position:relative;}
.blocklink{position:absolute;top:0px;left:0px;width:100%;height:100%;}​

Upvotes: 1

Related Questions