Wie kann man ein ganzes Div mit einem Hyperlink versehen und die Hintergrundfarbe ändern, wenn man den Mauszeiger darüber bewegt, so wie es bei den "Vorschlägen" auf der rechten Seite von YouTube-Videos der Fall ist?
Antworten
Zu viele Anzeigen?
Es ist kein div, sondern nur ein ahref und innerhalb des ahref sind span's, die den Block füllen. Sie können den Hintergrund der li mit jQuery bei Mouseover ändern.
<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>Überprüfen Sie einfach die Quelle von youtube :) (Firebug)
Martin Jespersen
Punkte
24954
Am einfachsten ist es, gar kein div zu verwenden, sondern mit display: block an einem a-Tag wie diesem:
<a href="..." style="display: block;">link text</a>Sie können es sogar mit einem Float oder einer Positionierung kombinieren, um alles nach Ihrem Geschmack zu gestalten.
Für den Hover-Effekt können Sie die css-Definition :hover wie folgt verwenden:
<style>
a { background: #fff; display: block;}
a:hover { background: #f00; }
</style>
<a href="...">link text</a>Hier ist ein Arbeitsbeispiel, das Sie als Inspiration verwenden können:
<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>
Bitsplitter
Punkte
970
Wenn Sie ein Div anklickbar machen wollen, brauchen Sie Javascript. Verwenden Sie das onclick-Ereignis, um den Klick zu erfassen und den Link wie folgt zu verfolgen:
<div id="mydiv" onclick = "top.location.href='http://www.google.com'">Die Farbänderung Teil Ihrer Frage könnte in CSS mit dem Selektor :hover jedoch, dass nicht in IE (IE erkennt nur :over für Links), so könnten Sie auch tun dies mit onmousover und onmousout Ereignisse, um die Stileigenschaften Ihrer div wie ändern getan werden
<div id="mydiv" onclick = "top.location.href='http://www.google.com'" onmousover="this.style.backgroundColor='blue'" onmousout="this.style.backgroundColor='white'">
Noufal Ibrahim
Punkte
68934
Chuck
Punkte
228137
