CSS hover + div not working

Question

So, disclaimer, I'm about 2 days into learning HTML and CSS. I thought it would be a cool project to transform my resume into a website. However, I've run into some snags when designing the experience page. In theory, I'd want to hover over an which would then display some text contained in a div. The hovering part works if I just use :hover instead of #att1:hover, but if I do that I can't have multiple objects. Hope that made sense.

I've attempted creating a div for each and simply making the a div, but since the elements are being placed inside of timeline I was unable to get the formatting on the page correct.

On a side note, once this is fixed, is there any way to have hover apply only to the image, and not to any associated margin/padding?

Here's what I've got:

#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>
		
<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>

ps. I promise I've researched for about 4 hours now. However, perhaps I'm not looking in the right places since this is so new to me.

Answer 1

The CSS selector you are using at the moment + is called an adjacent sibling selector. It will select any element immediately follows the element. That doesn't suit your needs. You better of doing this with a little bit of JavaScript. What you will do is check for mouseenter and mouseleave eventes on your images, and then handle the text accordingly. Below is an implementation with jQuery, an easy to install JavaScript library.

To only detect hover on the images, don't apply margin to the image, but only padding to the surrounding links.

To install jQuery in your page, simply put the following tag in your head:

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

The JavaScript is inserted using another script-tag following the jQuery tag, like this:

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

And here goes the 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>

Answer 2

Can be done if you change the html a bit. Put the .textbox divs to come after the anchors. Then use ~ to target siblings. The + is for direct sibling (if it comes right after).

#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>