1

I'm experimenting with a design. I have a text element that changes colors and glows on hover. It's an a element wrapped in a p. I have the text in the middle of a circular image. I'd like for the image to change it's border color from transparent to white when a is hovered over. I've done some research but can't seem to get any of the solutions to work.

What I've tried,

  • a:hover > img { border-color: #fff; }
  • a:hover + img { border-color: #fff; }
  • a:hover img { border-color: #fff; }
  • a:hover ~ img { border-color: #fff; }
  • Same as above but p a:hover + img
  • Adding a class and id to img

Please help, here's the code:

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(24, 24, 24);
}

.Hero {
  position: fixed;
  z-index: -1000;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  object-fit: cover;
}

img {
  display: block;
  width: 940px;
  height: 940px;
  margin: 0 auto;
  position: absolute;
  top: 10px;
  right: 485px;
  z-index: -999;
  border: 5px solid transparent;
  border-radius: 50%;
}

p {
  text-align: center;
  font-size: 70px;
  margin-top: 415px;
  text-shadow: -.75px -.75px 0 #25343f, .75px -.75px 0 #25343f, -.75px .75px 0 #25343f, .75px .75px 0 #25343f;
}

a {
  text-decoration: none;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  transition: all .7s;
}

p a {
  color: #405c71;
  font-family: Pacifico, cursive;
}

p a:hover {
  -webkit-animation: neon .9s ease-in-out infinite alternate;
  -moz-animation: neon .9s ease-in-out infinite alternate;
  animation: neon .65s ease-in-out infinite alternate;
  color: #fff;
}

@-webkit-keyframes neon {
  from {
    text-shadow: 0 0 5px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #405c71, 0 0 70px #405c71, 0 0 80px #405c71, 0 0 100px #405c71, 0 0 150px #405c71;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #405c71, 0 0 35px #405c71, 0 0 40px #405c71, 0 0 50px #405c71, 0 0 75px #405c71;
  }
}
<div class="Container">

  <!-- <div class="Hero">
     <video src="dojo/frontend/photography/images/editor.mp4" preload="auto" autoplay="true" loop="loop"></video>
  </div> -->

  <p><a href="dojo/frontend/photography/index.html">Welcome</a></p>
  <img class="logo" src="https://placehold.it/940x940" alt="">

</div>

Improve this question

2 Answers 2

Reset to default
2

There is no CSS selector that does what you are trying to do.

For a:hover + img to work, the image has to be directly after the link. so remove the <p> surrounding the <a>

or wrap both the link and the image inside the paragraph tag like so:

a:hover + img {
  border-color: #fff;
}
<p>
<a href="dojo/frontend/photography/index.html">Welcome</a><br/>
<img class="logo" src="dojo/frontend/photography/images/logo.png" alt="">
</p>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks! Lorem ipsum
0

CSS has no ability to look outside of the currently specified range of selectors, CSS can only cascade down, it cannot traverse back.

As it stands now, you could achieve the desired behaviour, using the adjacent sibling combinator +, with the following selectors: p:hover + img { border-color: #fff; }, without any further amendments to the DOM.
Although, this wouldn't be advised as these selectors are too general and not specific enough, the chances of only having one instance of a img tag following a generic p tag could be slim and unexpected knock-on effects could occur as a result.

Consider the following adjustments in order to have any one of the below specified range of selectors apply and provide the intended behaviour.

  • a:hover > img { border-color: #fff; }

1. Child Combinator >:

The > combinator selects nodes that are direct children of the first element

Example:

HTML

<div class="welcome">
  <p><a href="dojo/frontend/photography/index.html">Welcome</a></p>
  <img class="logo" src="https://placehold.it/940x940" alt="">
</div>

CSS

.welcome:hover > img {
  border-color: white;
}


/* Additional */

.welcome:hover > img {
  border-color: white;
}

/* End Additional */

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(24, 24, 24);
}

.Hero {
  position: fixed;
  z-index: -1000;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  object-fit: cover;
}

img {
  display: block;
  width: 940px;
  height: 940px;
  margin: 0 auto;
  position: absolute;
  top: 10px;
  right: 485px;
  z-index: -999;
  border: 5px solid transparent;
  border-radius: 50%;
}

p {
  text-align: center;
  font-size: 70px;
  margin-top: 415px;
  text-shadow: -.75px -.75px 0 #25343f, .75px -.75px 0 #25343f, -.75px .75px 0 #25343f, .75px .75px 0 #25343f;
}

a {
  text-decoration: none;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  transition: all .7s;
}

p a {
  color: #405c71;
  font-family: Pacifico, cursive;
}

p a:hover {
  -webkit-animation: neon .9s ease-in-out infinite alternate;
  -moz-animation: neon .9s ease-in-out infinite alternate;
  animation: neon .65s ease-in-out infinite alternate;
  color: #fff;
}

@-webkit-keyframes neon {
  from {
    text-shadow: 0 0 5px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #405c71, 0 0 70px #405c71, 0 0 80px #405c71, 0 0 100px #405c71, 0 0 150px #405c71;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #405c71, 0 0 35px #405c71, 0 0 40px #405c71, 0 0 50px #405c71, 0 0 75px #405c71;
  }
}
<div class="Container">

  <!-- <div class="Hero">
     <video src="dojo/frontend/photography/images/editor.mp4" preload="auto" autoplay="true" loop="loop"></video>
  </div> -->

  <div class="welcome">
    <p><a href="dojo/frontend/photography/index.html">Welcome</a></p>
    <img class="logo" src="https://placehold.it/940x940" alt="">
  </div>

</div>

  • a:hover + img { border-color: #fff; }

2. Adjacent Sibling Combinator +:

The + combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.

Example:

HTML

<div class="welcome">
  <p><a href="dojo/frontend/photography/index.html">Welcome</a></p>
  <img class="logo" src="https://placehold.it/940x940" alt="">
</div>

CSS

.welcome p:hover + img {
  border-color: white;
}


/* Additional */

.welcome p:hover + img {
  border-color: white;
}

/* End Additional */

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(24, 24, 24);
}

.Hero {
  position: fixed;
  z-index: -1000;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  object-fit: cover;
}

img {
  display: block;
  width: 940px;
  height: 940px;
  margin: 0 auto;
  position: absolute;
  top: 10px;
  right: 485px;
  z-index: -999;
  border: 5px solid transparent;
  border-radius: 50%;
}

p {
  text-align: center;
  font-size: 70px;
  margin-top: 415px;
  text-shadow: -.75px -.75px 0 #25343f, .75px -.75px 0 #25343f, -.75px .75px 0 #25343f, .75px .75px 0 #25343f;
}

a {
  text-decoration: none;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  transition: all .7s;
}

p a {
  color: #405c71;
  font-family: Pacifico, cursive;
}

p a:hover {
  -webkit-animation: neon .9s ease-in-out infinite alternate;
  -moz-animation: neon .9s ease-in-out infinite alternate;
  animation: neon .65s ease-in-out infinite alternate;
  color: #fff;
}

@-webkit-keyframes neon {
  from {
    text-shadow: 0 0 5px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #405c71, 0 0 70px #405c71, 0 0 80px #405c71, 0 0 100px #405c71, 0 0 150px #405c71;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #405c71, 0 0 35px #405c71, 0 0 40px #405c71, 0 0 50px #405c71, 0 0 75px #405c71;
  }
}
<div class="Container">

  <!-- <div class="Hero">
     <video src="dojo/frontend/photography/images/editor.mp4" preload="auto" autoplay="true" loop="loop"></video>
  </div> -->

  <div class="welcome">
    <p><a href="dojo/frontend/photography/index.html">Welcome</a></p>
    <img class="logo" src="https://placehold.it/940x940" alt="">
  </div>

</div>

  • a:hover ~ img { border-color: #fff; }

3. General Sibling Combinator ~:

The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.

Example:

HTML

<div class="welcome">
  <p><a href="dojo/frontend/photography/index.html">Welcome</a></p>
  <p>arbitrary element</p>
  <p>another arbitrary element</p>
  <img class="logo" src="https://placehold.it/940x940" alt="">
</div>

CSS

.welcome p:hover ~ img {
  border-color: white;
}


/* Additional */

.welcome p:hover ~ img {
  border-color: white;
}

/* End Additional */

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(24, 24, 24);
}

.Hero {
  position: fixed;
  z-index: -1000;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  object-fit: cover;
}

img {
  display: block;
  width: 940px;
  height: 940px;
  margin: 0 auto;
  position: absolute;
  top: 10px;
  right: 485px;
  z-index: -999;
  border: 5px solid transparent;
  border-radius: 50%;
}

p {
  text-align: center;
  font-size: 70px;
  margin-top: 415px;
  text-shadow: -.75px -.75px 0 #25343f, .75px -.75px 0 #25343f, -.75px .75px 0 #25343f, .75px .75px 0 #25343f;
}

a {
  text-decoration: none;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  transition: all .7s;
}

p a {
  color: #405c71;
  font-family: Pacifico, cursive;
}

p a:hover {
  -webkit-animation: neon .9s ease-in-out infinite alternate;
  -moz-animation: neon .9s ease-in-out infinite alternate;
  animation: neon .65s ease-in-out infinite alternate;
  color: #fff;
}

@-webkit-keyframes neon {
  from {
    text-shadow: 0 0 5px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #405c71, 0 0 70px #405c71, 0 0 80px #405c71, 0 0 100px #405c71, 0 0 150px #405c71;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #405c71, 0 0 35px #405c71, 0 0 40px #405c71, 0 0 50px #405c71, 0 0 75px #405c71;
  }
}
<div class="Container">

  <!-- <div class="Hero">
     <video src="dojo/frontend/photography/images/editor.mp4" preload="auto" autoplay="true" loop="loop"></video>
  </div> -->

  <div class="welcome">
    <p><a href="dojo/frontend/photography/index.html">Welcome</a></p>
    <p>arbitrary element</p>
    <p>another arbitrary element</p>
    <img class="logo" src="https://placehold.it/940x940" alt="">
  </div>
  
</div>

  • a:hover img { border-color: #fff; }

4. Descendant Combinator :

The combinator selects nodes that are descendants of the first element.

Example:

HTML

<div class="welcome">
  <p><a href="dojo/frontend/photography/index.html">Welcome</a>
     <img class="logo" src="https://placehold.it/940x940" alt="">
  </p>
</div>

CSS

.welcome p:hover img {
  border-color: white;
}


/* Additional */

.welcome p:hover img {
  border-color: white;
}

/* End Additional */

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(24, 24, 24);
}

.Hero {
  position: fixed;
  z-index: -1000;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  object-fit: cover;
}

img {
  display: block;
  width: 940px;
  height: 940px;
  margin: 0 auto;
  position: absolute;
  top: 10px;
  right: 485px;
  z-index: -999;
  border: 5px solid transparent;
  border-radius: 50%;
}

p {
  text-align: center;
  font-size: 70px;
  margin-top: 415px;
  text-shadow: -.75px -.75px 0 #25343f, .75px -.75px 0 #25343f, -.75px .75px 0 #25343f, .75px .75px 0 #25343f;
}

a {
  text-decoration: none;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  transition: all .7s;
}

p a {
  color: #405c71;
  font-family: Pacifico, cursive;
}

p a:hover {
  -webkit-animation: neon .9s ease-in-out infinite alternate;
  -moz-animation: neon .9s ease-in-out infinite alternate;
  animation: neon .65s ease-in-out infinite alternate;
  color: #fff;
}

@-webkit-keyframes neon {
  from {
    text-shadow: 0 0 5px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #405c71, 0 0 70px #405c71, 0 0 80px #405c71, 0 0 100px #405c71, 0 0 150px #405c71;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #405c71, 0 0 35px #405c71, 0 0 40px #405c71, 0 0 50px #405c71, 0 0 75px #405c71;
  }
}
<div class="Container">

  <!-- <div class="Hero">
     <video src="dojo/frontend/photography/images/editor.mp4" preload="auto" autoplay="true" loop="loop"></video>
  </div> -->

  <div class="welcome">
    <p>
      <a href="dojo/frontend/photography/index.html">Welcome</a>
      <img class="logo" src="https://placehold.it/940x940" alt="">
    </p>
  </div>
  
</div>

More on CSS Selectors

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.