CSS Hover + div funktioniert nicht

Question

Also, Disclaimer, ich bin etwa 2 Tage in das Lernen von HTML und CSS. Ich dachte, es wäre ein cooles Projekt, um meinen Lebenslauf in eine Website zu verwandeln. Allerdings habe ich bei der Gestaltung der Experience-Seite einige Probleme bekommen. Theoretisch würde ich gerne über einen Zeiger halten, der dann einen Text anzeigt, der in einem div enthalten ist. Der Schwebeteil funktioniert, wenn ich einfach Folgendes verwende: hover anstelle von # att1: hover, aber wenn ich das tue, kann ich nicht mehrere Objekte haben. Hoffnung, die Sinn ergab.

Ich habe versucht, ein div für jedes zu erstellen und einfach das a div, aber da die Elemente innerhalb der Timeline platziert werden, konnte ich nicht die Formatierung auf der Seite korrigieren.

Wenn dies behoben ist, gibt es eine Möglichkeit, Hover nur für das Bild und nicht für alle zugeordneten Rand/Padding gelten?

Hier ist, was ich habe:

#job1 
 

 
{ 
 
\t display: none; 
 
} 
 

 
#job2 
 

 
{ 
 
\t display: none; 
 
} 
 

 
#att1:hover + #job1 
 

 
{ 
 
\t display: block; 
 
} 
 

 
#att2:hover + #job2 
 

 
{ 
 
\t display: block; 
 
}

<div class = "timeline"> 
 
\t \t 
 
\t <div id = "line"></div> 
 
\t \t \t 
 
\t <a id = "att1" href = "#"><img id = "scintern" src = "https://www.santandercareers.com/content/themes/scusa-careers/assets/images/bemore.png" alt = "Santander Logo"></a> 
 
\t <a id = "att2" href = "#"><img id = "scdss" src = "https://www.santandercareers.com/content/themes/scusa-careers/assets/images/bemore.png" alt = "Santander Logo"></a> 
 
\t \t \t 
 
</div> 
 
\t \t 
 
<div class = "textbox" id = "job1"> 
 
\t \t \t 
 
\t <p class = "header">Santander Consumer USA, Inc.</p> 
 
\t <p class = "body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
 
\t \t 
 
</div> 
 
\t \t 
 
<div class = "textbox" id = "job2"> 
 
\t \t 
 
\t <p class = "header">Santander Consumer USA, Inc. 2</p> 
 
\t <p class = "body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
 
\t \t 
 
</div>

ps. Ich verspreche, dass ich seit ungefähr 4 Stunden recherchiert habe. Aber vielleicht schaue ich nicht an den richtigen Stellen, denn das ist so neu für mich.

Answer 1

Kann getan werden, wenn Sie den HTML ein wenig ändern. Setzen Sie die .textbox divs nach den Ankern kommen. Verwenden Sie dann ~, um auf Geschwister zu verweisen. Die + ist für direkte Geschwister (wenn es gleich danach kommt).

#job1 { 
 
    display: none; 
 
} 
 
#job2 { 
 
    display: none; 
 
} 
 
#att1:hover ~ #job1 { 
 
    display: block; 
 
} 
 
#att2:hover ~ #job2 { 
 
    display: block; 
 
}

<div class="timeline"> 
 

 
    <div id="line"></div> 
 

 
    <a id="att1" href="#"> 
 
    <img id="scintern" src="https://www.santandercareers.com/content/themes/scusa-careers/assets/images/bemore.png" alt="Santander Logo"> 
 
    </a> 
 
    <a id="att2" href="#"> 
 
    <img id="scdss" src="https://www.santandercareers.com/content/themes/scusa-careers/assets/images/bemore.png" alt="Santander Logo"> 
 
    </a> 
 

 
    <div class="textbox" id="job1"> 
 

 
    <p class="header">Santander Consumer USA, Inc.</p> 
 
    <p class="body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
 

 
    </div> 
 

 
    <div class="textbox" id="job2"> 
 

 
    <p class="header">Santander Consumer USA, Inc. 2</p> 
 
    <p class="body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
 

 
    </div> 
 

 
</div>

Answer 2

Der CSS-Selektor Sie im Moment verwenden + ist eine adjacent sibling selector genannt. Es wird jedes Element auswählen, das unmittelbar auf das Element folgt. Das passt nicht zu deinen Bedürfnissen. Sie tun dies besser mit ein bisschen JavaScript. Was Sie tun werden, ist zu überprüfen, mouseenter und mouseleave eventes auf Ihren Bildern, und dann den Text entsprechend behandeln. Im Folgenden finden Sie eine Implementierung mit jQuery, einer einfach zu installierenden JavaScript-Bibliothek.

Um nur den Schwebeflug in den Bildern zu erkennen, sollten Sie keinen Rand auf das Bild anwenden, sondern nur auf die umgebenden Links.

Um jQuery auf Ihrer Seite zu installieren, setzten Sie einfach den folgenden Tag in Ihrem Kopf:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script> 

Das JavaScript eingefügt wird nach dem jQuery-Tag einen anderen Skript-Tag verwendet wird, wie folgt aus:

<script> 
    Your code here... 
</script> 

Und hier geht das snippet:

$("#scintern").mouseover(function() { 
 
    $("#job1").show(); 
 
}); 
 
$("#scintern").mouseleave(function() { 
 
    $("#job1").hide(); 
 
}); 
 

 
$("#scdss").mouseover(function() { 
 
    $("#job2").show(); 
 
}); 
 
$("#scdss").mouseleave(function() { 
 
    $("#job2").hide(); 
 
});

#att1, #att2 { 
 
    text-decoration: none; 
 
} 
 

 
#job1 { 
 
    display: none; 
 
} 
 
#job2 { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="timeline"> 
 
    <div id="line"></div> 
 
    <a href="#" id="att1"> 
 
     <img alt="Santander Logo" id="scintern" src="https://www.santandercareers.com/content/themes/scusa-careers/assets/images/bemore.png"> 
 
    </a> 
 
    <a href="#" id="att2"> 
 
     <img alt="Santander Logo" id="scdss" src="https://www.santandercareers.com/content/themes/scusa-careers/assets/images/bemore.png"> 
 
    </a> 
 
</div> 
 
<div class="textbox" id="job1"> 
 
    <p class="header">Santander Consumer USA, Inc.</p> 
 
    <p class="body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
 
</div> 
 
<div class="textbox" id="job2"> 
 
    <p class="header">Santander Consumer USA, Inc. 2</p> 
 
    <p class="body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
 
</div>