1

A similar question has been asked but it didn't provide a solution for my issue. CSS: On hover show and hide different div's at the same time?

I want to hide a div and display an image in the center of the page at the same time when I hover over my list items.

I tried this but it the second div in the middle of the page still shows on hover.

/* absorbing paddings within the div's width, instead of adding it 
on top */

* {
  box-sizing: border-box;
}

#container {
  width: 100%;
}

header {
  padding-top: 10px;
}

h1 {
  text-align: center;
  font-size: 150%;
}

.a {
  width: 7%;
  height: 48px;
}

.b {
  width: 45%;
  height: 48px;
}

.a,
.b {
  display: inline-block;
  vertical-align: top;
  padding: 5px;
  padding-top: 10px;
  margin: 5px;
  margin-right: 195px;
}

.a,
ul {
  list-style: none;
  line-height: 150%;
  padding-top: 15px
}

li a {
  text-decoration: none;
  color: inherit;
}

.b,
h2 {
  text-align: center;
}

.projectImage {
  display: none;
}

.a:hover .projectImage {
  display: block;
}

.a:hover .b {
  display: none;
}

.a,
.image1:hover .projectImage {}
<div id="container">

  <header id="title">
    <h1>Lorem Ipsum</h1>
  </header>

  <div class="a">

    <ul class="projectList">

      <li class="projectImage"><a href="#">Project<span><img class="image1" src="" alt="" height="" /></span></a></li>

      <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li>

      <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li>

      <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li>

      <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li>

      <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li>

      <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li>

    </ul>

  </div>

  <div class="b">

    <h2>lorem ipsum</h2>

    <p>Lorem ipsum dolor sit amet, suspendisse nam habitasse pellentesque arcu quae dignissim, amet magna diam aenean. Amet ipsum aenean, massa posuere maecenas nam lectus nibh lacus, nisl lacus magna nullam leo quis. Mi elit ante nunc, mi odio congue rhoncus
      dui quis dictum, lectus eleifend aliquam sed venenatis vitae lorem, potenti non dictum sit. Condimentum nonummy vitae tristique, pede nullam pretium arcu vestibulum dictum, urna erat aliquam duis sit pede nam. Morbi mauris fermentum luctus morbi
      nec eget, vitae fermentum et maecenas, primis ullamcorper mauris et diam nunc, turpis massa sit felis nullam.</p>

    <p>Interdum morbi pellentesque. Et semper diam vestibulum, nisl est, porttitor mauris tellus hac, ut dictum massa. Elementum malesuada curabitur non euismod arcu, sit justo suspendisse aliquam purus suspendisse. Felis est leo, quis turpis ornare quis
      tellus, fusce neque ut vitae justo penatibus molestie, per labore suscipit corrupti, non sed in id amet velit. Tempor rutrum tristique anim orci massa, arcu dolor eros dictum arcu.</p>

  </div>

</div>

https://codepen.io/jordan_miguel/pen/dWNbzL?editors=1100

Community
  • 1
  • 1
Jordan Miguel
  • 632
  • 1
  • 9
  • 34

1 Answers1

0

Since element .a and element .b are right next to each other in the markup you have supplied, you probably want to use the sibling selector to target element .b. Simply change your last declaration block to:

.a:hover + .b {
  display: none;
}

Here's an updated Codepen.

Hope this helps! Let me know if you have any questions.

Serlite
  • 12,130
  • 5
  • 38
  • 49
  • thanks a lot, that works! I should've said in the question, but i've now got a problem..I need to display a different image for each list item. Would it be best to just give each li its own class and then apply the same css rules? – Jordan Miguel Apr 26 '17 at 16:11
  • @JordanMiguel Hm, the hiding will still have to be at the `.a` level, since that element is the only one that is a sibling to `.b`. However, you certainly could do the showing of images at the `li` level - you don't even need to have unique classes (just have a general shared class between them), then place a child image inside each `li` and have it shown when the `li` is hovered over. – Serlite Apr 26 '17 at 16:13
  • Yes that makes sense. However with your solution I've noticed that as the .projectImage is displayed to none, the actual writing 'project' isn't displayed either. I tried doing .projectImage img { display: none;} , this fixed the issue with the writing but it didn't show the image. see here - https://codepen.io/jordan_miguel/pen/dWNbzL?editors=1100 – Jordan Miguel Apr 26 '17 at 16:21
  • @JordanMiguel To reveal the image, `.a:hover` is not the correct selector. You should be making use of the new class you wrote, and targeting the image under it with `.a .projectImage:hover img`. https://codepen.io/anon/pen/BRpygB – Serlite Apr 26 '17 at 16:54
  • of course, silly mistake on my end. Thanks for the a lot for the help! – Jordan Miguel Apr 26 '17 at 17:00