Frage Text unterstreichen + Bild wechseln wenn man mit der Maus über das DIV fährt

[Chumscrubber]

Hallo zusammen,

ich habe folgendes Anliegen:

Ich möchte in einem DIV zwei Dinge auf einmal:
1. Der Text soll von Links nach rechts unterstrichen werden
2. Das Bild daneben soll wechseln wenn man mit der Maus über das DIV fährt.

Text wird per aktuell per hover von links nach rechts unterstrichen.
Das Bild wechselt aktuell per rollover.

Wie kannich dem DIV klarmachen, dass es den Text unterstreichen und das Bild wechseln soll?

Hier der Quelltext

#links{
font-family:'Raleway'; font-size:15px; font-weight:500;
border: 1px; border-style:none;
padding: 5 5 5 5em;
margin-left:11.5em;
margin-right:0.5em;
border-color:black;
left: 509px; top: 211px; width: 255px; height: 110px;
padding:5px 5px 0px 5px;
background-repeat: no-repeat;
width: 260px;
margin: 0 auto 0 auto;
}

.rollover a { display:block;
width:43px;
height:64px;
background-image:url('logo_bw.png');
}

.rollover a:hover { display:block;
width:43px;
height:64px;
background-image:url('logo.png');
}

hover {
text-decoration: none;
position: relative;
color: #5a768a;

}

hover:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 2px solid #5a768a;
transition: 0.4s;
color: #5a768a;
}

hover:hover:after {
width: 100%;
color: #5a768a;
}

​

 

[djheke]

Meinst du so?

div , div div, a { float:left;}
div:hover div { text-decoration:underline;}
div:hover a { background:#f0f;}

<div>
<div>Das ist ein Text</div>
<a href="">Das ist ein Link</a>
</div>

 

[Chumscrubber]

Hallo djheke,

Vielen Dank für dein Feedback
Das geht schon in die richtige Richtung!

Ich möchte das diese Beiden Elemente gleichzeitig ausgeführt werden:
https://jsfiddle.net/kaknxouf/

Was muss ich da umstellen?

Danke für die Hilfe!

 

[djheke]

Hab ich dir doch gegeben.
Hier eine andere Version.
https://jsfiddle.net/kaknxouf/4/

 

[Chumscrubber]

Hallo djheke,

super Sache!
Ich bekomme nur nicht hin das dass Unterstreichen von der links nach rechts gesehen soll.
Wie in https://jsfiddle.net/kaknxouf/.
Gibt es da einen Kniff?

Danke für deine Unterstützung!

 

[djheke]

https://jsfiddle.net/kaknxouf/6/

 

[Chumscrubber]

in deinem Beispiel ist der Strich durchgängig.
Hier hingegen lädt er von links nach rechts:
https://jsfiddle.net/kaknxouf/7/
Ich bekomme es verflixt nochmal nicht hin.
Hast du da evtl. noch eine Idee?

Viele Grüße

 

[djheke]

Woher hast das <hover> Tag?

https://jsfiddle.net/kaknxouf/8/

 

[Chumscrubber]

das hab ich von hier:
http://www.cssportal.com/blog/css-animated-underline-links/

 

[djheke]

Hm, vom <hover></hover> Element ist dort nichts zu sehen