Home > Software engineering >  How do I make each link show its own text on the background when hovering?
How do I make each link show its own text on the background when hovering?

Time：10-22

I have 3 links when hovering over which I want a certain text to appear in the background. That is, when I hover the mouse cursor over "Works", "Works" appears in the background, when I hover over "About", "About" appears in the background. I don't understand how to do this if I add a second text, they climb on top of each other.

I attach my code below (You need to open the whole page to see the result).

I will be grateful if you help

.info {
  max-width: 1920px;
  padding: 40px 0 0;
  margin: 0 auto;
}

.info__container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-decoration: none;
  list-style-type: none;
  font-size: 20px;
  color: #1c1c1c;
  background-color: #ebebeb;
  margin: 0;
  padding-left: 0;
  height: 150px;
  width: 100%;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

 .info__text{
  width: 60px; 
  z-index: 1;
} 

.info__black-hover {
  background: #1c1c1c;
  width: 1920px;
  height: 0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  transition: 0.5s opacity, 0.5s visibility, 0.6s height ease-in;
}

.info__text:hover~.info__black-hover{
  width: 100%;
  height: 150px;
  opacity: 1;
  visibility: visible;
  background: #1c1c1c;
} 

.info__text_hidden {
  font-size: 210px;
  font-family: "Roobert";
  letter-spacing: -10px;
  position: absolute;
  color: #474747; 
  bottom: -38px;
  left: 870px;
  z-index: 1;
  transform: translateY(70%);
  transition: all 1.3s ease;
}

 .info__text:hover~.info__text_hidden {
    visibility: visible;
    color: #636262;
    transform: translateY(0%);
}  


.info__text_decoration {
  font-family: "RoxboughCF-Regular";
  position: absolute;
  left: -185px;
  bottom: 2px;
}

.info__number {
  font-size: 22px;
  color: #7a7a7a;
}

.info__link {
  text-decoration: none;
  list-style-type: none;
  color: #1c1c1c; 
}

.info__link:hover {
  color: white;
}
<section >
      <ul >
        <li  ><span >01</span><a  href="#"> Works</a></li>
        <div ><span >W</span>orks</div> 
        <li ><span >02</span><a   href="#"> About</a></li>
        <div ><span >A</span>bout</div> 
        <li ><span >03</span><a   href="#"> Contact</a></li>
        <div ></div>
      </ul>
    </section>

CodePudding user response：

Try this, I think it will be much better and simple:

CSS

section {
    display: flex;
    position: relative;
    justify-content: space-between;
    transition: .3s;
    font-family:sans-serif;
    background: #eee;
}
section:hover {
    background: black;
}
section:hover a{
    color: white;
}
section a {
    width: 33%;
    text-decoration: none;
    font-size: 30px;
    color: black;
    height: 400px;
    display: flex;
    padding-top: 100px;
    justify-content: center;
}
section .background_text {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    color: white;
    align-items: center;
    justify-content: center;
    font-size: 100px;
    pointer-events: none;
    transform: translateY(100px);
    opacity: 0;
    transition: .3s;
}
section .background_text.active {
    transform: translateY(0);
    opacity: 1;
}

JAVASCRIPT

let background_text = document.querySelector('.background_text');
let links = document.querySelectorAll('a.link');
links.forEach( e => {
    e.onmouseover = function () {
        background_text.classList.add('active');
        background_text.textContent = e.textContent;
    } 
    e.onmouseleave = function () {
        background_text.classList.remove('active');
    }
});

HTML

<section>
    <div ></div>
    <a href="#" >Works</a>
    <a href="#" >About</a>
    <a href="#" >Contact</a>
</section>

CodePudding user response：

Making yur HTML into 'legal' code, by putting the divs holding the larger text into the li elements instead of separately, we then alter the hover state CSS so that it is the child of the hovered element that is being transformed (not a sibling as in the original).

This snippet has just those changes:

.info {
  max-width: 1920px;
  padding: 40px 0 0;
  margin: 0 auto;
}

.info__container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-decoration: none;
  list-style-type: none;
  font-size: 20px;
  color: #1c1c1c;
  background-color: #ebebeb;
  margin: 0;
  padding-left: 0;
  height: 150px;
  width: 100%;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.info__text {
  width: 60px;
  z-index: 1;
}

.info__black-hover {
  background: #1c1c1c;
  width: 1920px;
  height: 0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  transition: 0.5s opacity, 0.5s visibility, 0.6s height ease-in;
}

.info__text:hover .info__black-hover {
  width: 100%;
  height: 150px;
  opacity: 1;
  visibility: visible;
  background: #1c1c1c;
}

.info__text_hidden {
  font-size: 210px;
  font-family: "Roobert";
  letter-spacing: -10px;
  position: absolute;
  color: #474747;
  bottom: -38px;
  left: 870px;
  z-index: 1;
  transform: translateY(70%);
  transition: all 1.3s ease;
}

.info__text:hover .info__text_hidden {
  visibility: visible;
  color: #636262;
  transform: translateY(0%);
}

.info__text_decoration {
  font-family: "RoxboughCF-Regular";
  position: absolute;
  left: -185px;
  bottom: 2px;
}

.info__number {
  font-size: 22px;
  color: #7a7a7a;
}

.info__link {
  text-decoration: none;
  list-style-type: none;
  color: #1c1c1c;
}

.info__link:hover {
  color: white;
}
<section >
  <ul >
    <li ><span >01</span><a  href="#"> Works</a>
      <div ><span >W</span>orks</div>
    </li>
    <li ><span >02</span><a  href="#"> About</a>
      <div ><span >A</span>bout</div>
    </li>
    <li ><span >03</span><a  href="#"> Contact</a>
      <div ></div>
    </li>
  </ul>
</section>

There are other things you may want to look at. For example, would the user of first-character be helpful instead of a separate span element in the text of the large words. Also, what exactly you want the effect on the Contact element when hovered to be. At the moment just a black rectangle appears.

CodePudding user response：

  • You can use data-attribute and access it in ::before or ::afetr css's content property. for more info visit this.
  • Below we are accessing data-linkfor value and displaying it in background.
/*Added css for getting currently hoverd text in backgrouond*/
.info__text::before {
  content: attr(data-linkfor);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 56px;
  opacity: 0;
  color: #fff;
  transition: .5s;
}

.info__text:hover::before {
  opacity: 0.6;
}



.info {
  max-width: 1920px;
  padding: 40px 0 0;
  margin: 0 auto;
}

.info__container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-decoration: none;
  list-style-type: none;
  font-size: 20px;
  color: #1c1c1c;
  background-color: #ebebeb;
  margin: 0;
  padding-left: 0;
  height: 150px;
  width: 100%;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.info__text {
  width: 60px;
  z-index: 1;
}

.info__black-hover {
  background: #1c1c1c;
  width: 1920px;
  height: 0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  transition: 0.5s opacity, 0.5s visibility, 0.6s height ease-in;
}

.info__text:hover~.info__black-hover {
  width: 100%;
  height: 150px;
  opacity: 1;
  visibility: visible;
  background: #1c1c1c;
}

.info__text_hidden {
  font-size: 210px;
  font-family: "Roobert";
  letter-spacing: -10px;
  position: absolute;
  color: #474747;
  bottom: -38px;
  left: 870px;
  z-index: 1;
  transform: translateY(70%);
  transition: all 1.3s ease;
}

.info__text:hover~.info__text_hidden {
  visibility: visible;
  color: #636262;
  transform: translateY(0%);
}

.info__text_decoration {
  font-family: "RoxboughCF-Regular";
  position: absolute;
  left: -185px;
  bottom: 2px;
}

.info__number {
  font-size: 22px;
  color: #7a7a7a;
}

.info__link {
  text-decoration: none;
  list-style-type: none;
  color: #1c1c1c;
}

.info__text:hover .info__link {
  color: #fff;
}

.info__link:hover {
  color: white;
}


/*Added css for getting currently hoverd text in backgrouond*/

.info__text::before {
  content: attr(data-linkfor);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 56px;
  opacity: 0;
  color: #fff;
  transition: .5s;
}

.info__text:hover::before {
  opacity: 0.6;
}
<section >
  <ul >
    <li data-linkfor="Works" ><span >01</span><a  href="#"> Works</a></li>
    <li data-linkfor="About" ><span >02</span><a  href="#"> About</a></li>
    <li data-linkfor="Contact" ><span >03</span><a  href="#"> Contact</a></li>
  </ul>
</section>

CodePudding user response：

You could perhaps use pseudo ::before elements with attr() function as the css content value...

content: attr(data-text);

Data attribute then set in the .info__link anchor tag...

<a href="#" data-text="Works">Works</a>

Could do with some refining but the method uses less markup.

See working demo below and fiddle... https://jsfiddle.net/joshmoto/714rpkw8/1/

.info {
  max-width: 1920px;
  margin: 0 auto;
}

.info__container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-decoration: none;
  list-style-type: none;
  font-size: 20px;
  color: #1c1c1c;
  background-color: #ebebeb;
  margin: 0;
  padding-left: 0;
  height: 150px;
  width: 100%;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.info__text {
  width: 60px;
}

.info__number {
  font-size: 22px;
  color: #7a7a7a;
}

.info__link {
  text-decoration: none;
  list-style-type: none;
  color: #1c1c1c;
}

.info__link:hover {
  color: white;
}

.info__link::before {
  content: attr(data-text);
  display: block;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 50%;
  bottom: 50%;
  transition: all .5s ease;
  font-size: 100px;
  line-height: auto;
  font-family: "Roobert";
  color: #474747;
  background: #1c1c1c;
  overflow: hidden;
  z-index: -10;
}

.info__link:hover::before {
  top: 0;
  bottom: 0;
}
<section >
  <ul >
    <li >
      <span >01</span> 
      <a  href="#" data-text="Works">Works</a>
    </li>  
    <li >
      <span >02</span> 
      <a  href="#" data-text="About">About</a>
    </li>
    <li >
      <span >03</span> 
      <a  href="#" data-text="Contact">Contact</a>
    </li>
  </ul>
</section>

Another option, is you can use :has(), tho not fully supported by all browsers yet.

See :has() compatibility https://caniuse.com/?search=has

Using :has() in this example below runs the background transition effect behind all the before elems using attr() to render the data-text attribute value.

See working demo below and fiddle... https://jsfiddle.net/joshmoto/y9164hxz/

.info {
  max-width: 1920px;
  margin: 0 auto;
}

.info__container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-decoration: none;
  list-style-type: none;
  font-size: 20px;
  color: #1c1c1c;
  background: #ebebeb;
  margin: 0;
  padding-left: 0;
  height: 150px;
  width: 100%;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.info__container:has(.info__link:hover) .info__link:not(:hover) {
  color: #7a7a7a;
}

.info__text {
  width: 60px;
}

.info__text::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  bottom: 50%;
  transition: all .5s ease;
  background: #1c1c1c;
  z-index: -11;
}

.info__text:has(.info__link:hover)::before {
  top: 0;
  bottom: 0;
}

.info__number {
  font-size: 22px;
  color: #7a7a7a;
  display: inline-block;
}

.info__link {
  text-decoration: none;
  list-style-type: none;
  color: #1c1c1c;
}

.info__link:hover {
  color: white;
}

.info__link::before {
  content: attr(data-text);
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  bottom: 50%;
  font-size: 100px;
  line-height: auto;
  font-family: "Roobert";
  color: #474747;
  overflow: hidden;
  z-index: -10;
  pointer-events: none;
  transition: all .5s ease;
}

.info__link:hover::before {
  top: 0;
  bottom: 0;
}
<section >
  <ul >
    <li >
      <span >01</span> 
      <a  href="#" data-text="Works">Works</a>
    </li>  
    <li >
      <span >02</span> 
      <a  href="#" data-text="About">About</a>
    </li>
    <li >
      <span >03</span> 
      <a  href="#" data-text="Contact">Contact</a>
    </li>
  </ul>
</section>


Let me know if this works or you need more refinement.

Page link：https//www.codepudding.com/Softwareengineering/584693.html

Prev:how can i position a button inside a grid div
Next:button offcanvas only show
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding