Hyperlink whole div
How can you hyperlink a whole div and have the background color change on hover, as the "Suggestions" on the right side of YouTube videos are don开发者_StackOverflow社区e?
It's is not a div, but just an ahref and inside the ahref are span's that fill the block. You could change the background of the li with jQuery on mouse over.
<li class="video-list-item">
<a href="Link" class="video-list-item-link">
<span class="ux-thumb-wrap ">
<span class="title">Title</span>
<span class="stat">by YouTube</span>
<span class="stat">
</a>
</li>
Just check the source of youtube :) (Firebug)
The easiest is not to use a div at all but use display: block on an a-tag like this:
<a href="..." style="display: block;">link text</a>
you could even combine it with float or a positioning to make it all work to your liking
For the hover effect you can use the :hover css definition like this:
<style>
a { background: #fff; display: block;}
a:hover { background: #f00; }
</style>
<a href="...">link text</a>
Here is a working example you can use as inspiration:
<html>
<head>
<style>
a { display: block; background: #fff; width: 200px;}
a:hover { background: #88f; }
</style>
</head>
<body>
<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare tortor ac libero sodales id sodales ligula posuere. Sed fringilla, quam eu lacinia fringilla, magna sapien convallis velit, at molestie erat tellus ullamcorper metus. In hac habitasse platea dictumst. Mauris faucibus imperdiet lacus eget sagittis.</a>
</body>
</html>
If you want to make a div clickable, you'd need javascript. Use the onclick event to capture the click and follow the link like this:
<div id="mydiv" onclick = "top.location.href='http://www.google.com'">
The color change part of you question could be done in CSS with the :hover selector however, that won't work in IE (IE only recognizes :over for links) so you might as well do this with onmousover and onmousout events to change the style properties of your div like
<div id="mydiv" onclick = "top.location.href='http://www.google.com'" onmousover="this.style.backgroundColor='blue'" onmousout="this.style.backgroundColor='white'">
Why the whole div? Why don't you simply make an anchor and put stuff inside it as you please. Then position/style it as you wish?
If you look at the YouTube source, you'll see that's an <a> element, not a <div>. The image and bits of text are each enclosed in spans inside the link. That's how I'd do it too.
加载中,请稍侯......
精彩评论