Home > Net >  Enabling a css element to be clickable
Enabling a css element to be clickable

Time：07-05

I have a store area in Shopify, which has CSS elements

  • And I want to make them clickable this is my CSS code

    I tried all sorts of tips written here And I did not succeed This is for my store And I would love to get a solution

  • And I want to make them clickable this is my CSS code

Has anyone been able to solve this problem?

I have an area on the site And in this area there are icons Mouse over the icons has a moving animation I want the icons to be clickable And that they will link to the link within the site

#shopByBodyPart {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#shopByBodyPart * {
  margin: 0;
  padding: 0;
}

#shopByBodyPart dt {
  width: 100%;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 60px;
}

#shopByBodyPart dd {
  width: 140px;
  height: 140px;
  color: #6a6a6a;
  font-weight: lighter;
  text-align: center;
  font-size: 14px;
  padding-top: 120px;
  margin: 0 40px 50px;
  cursor: pointer;
  position: relative;
  opacity: 0.6;
  transition: opacity 0.3s;
}

#shopByBodyPart dd:hover {
  opacity: 1;
}

#shopByBodyPart dd::before {
  content: "";
  width: 100px;
  height: 100px;
  display: block;
  position: absolute;
  top: 0;
  left: 20px;
  transform: scale(0.8);
  background: url("https://cdn.shopify.com/s/files/1/0032/9370/8323/files/massage-part-all-min.png?6661") no-repeat 0 0;
  background-size: 500px auto;
}

#shopByBodyPart dd:nth-of-type(1)::before {
  background-position: -300px 0
}

#shopByBodyPart dd:nth-of-type(2)::before {
  background-position: 0 0
}

#shopByBodyPart dd:nth-of-type(3)::before {
  background-position: -400px 0
}

#shopByBodyPart dd:nth-of-type(4)::before {
  background-position: -200px 0
}

#shopByBodyPart dd:nth-of-type(5)::before {
  background-position: -100px 0
}

#shopByBodyPart dd:nth-of-type(1):hover::before {
  animation: steps-8 1s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(2):hover::before {
  animation: steps-8 1s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(3):hover::before {
  animation: steps-6 0.6s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(4):hover::before {
  animation: steps-13 1s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(5):hover::before {}

@media screen and (max-width: 540px) {
  #shopByBodyPart dd {
    width: 120px;
    margin: 0 20px 20px;
  }
  #shopByBodyPart dd::before {
    left: 10px;
  }
}


/** animation part start */

@keyframes steps-8 {
  0% {
    background-position-y: 0;
  }
  12.5% {
    background-position-y: -100px;
  }
  25% {
    background-position-y: -200px;
  }
  37.5% {
    background-position-y: -300px;
  }
  50% {
    background-position-y: -400px;
  }
  62.5% {
    background-position-y: -500px;
  }
  75% {
    background-position-y: -600px;
  }
  87.5% {
    background-position-y: -700px;
  }
  100% {
    background-position-y: -800px;
  }
}

@keyframes steps-16 {
  0% {
    background-position-y: 0
  }
  6.25% {
    background-position-y: -100px
  }
  12.5% {
    background-position-y: -200px
  }
  18.75% {
    background-position-y: -300px
  }
  25% {
    background-position-y: -400px
  }
  31.25% {
    background-position-y: -500px
  }
  37.5% {
    background-position-y: -600px
  }
  43.75% {
    background-position-y: -700px
  }
  50% {
    background-position-y: -800px
  }
  56.25% {
    background-position-y: -900px
  }
  62.5% {
    background-position-y: -1000px
  }
  68.75% {
    background-position-y: -1100px
  }
  75% {
    background-position-y: -1200px
  }
  81.25% {
    background-position-y: -1300px
  }
  87.5% {
    background-position-y: -1400px
  }
  93.75% {
    background-position-y: -1500px
  }
  100% {
    background-position-y: -1600px
  }
}

@keyframes steps-13 {
  0% {
    background-position-y: 0
  }
  7.6923076923076925% {
    background-position-y: -100px
  }
  15.384615384615385% {
    background-position-y: -200px
  }
  23.076923076923077% {
    background-position-y: -300px
  }
  30.76923076923077% {
    background-position-y: -400px
  }
  38.46153846153846% {
    background-position-y: -500px
  }
  46.15384615384615% {
    background-position-y: -600px
  }
  53.84615384615385% {
    background-position-y: -700px
  }
  61.53846153846154% {
    background-position-y: -800px
  }
  69.23076923076923% {
    background-position-y: -900px
  }
  76.92307692307692% {
    background-position-y: -1000px
  }
  84.61538461538461% {
    background-position-y: -1100px
  }
  92.3076923076923% {
    background-position-y: -1200px
  }
  100% {
    background-position-y: -1300px
  }
}

@keyframes steps-6 {
  0% {
    background-position-y: 0
  }
  16.666666666666668% {
    background-position-y: -100px
  }
  33.333333333333336% {
    background-position-y: -200px
  }
  50% {
    background-position-y: -300px
  }
  66.66666666666667% {
    background-position-y: -400px
  }
  83.33333333333334% {
    background-position-y: -500px
  }
  100% {
    background-position-y: -600px
  }
}
<dl id="shopByBodyPart">
  <dt>SHOP BY BODY PART</dt>
  <dd><a href="https://www.naipo.co.il/collections/neck-and-shoulder">Neck &amp; Shoulder</a></dd>
  <dd><a href="https://www.naipo.co.il/collections/back-massager">Back</a></dd>
  <dd><a href="https://www.naipo.co.il/collections/back-massager">Waist</a></dd>
  <dd><a href="https://www.naipo.co.il/collections/leg-foot-massager
  ">Leg &amp; Foot</a></dd>
  <dd><a href="https://www.naipo.co.il/collections/full-body-massager">Full Body</a></dd>
</dl>

CodePudding user response：

Make the icons internal to the a tags instead. Then they will be part of the link

#shopByBodyPart {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#shopByBodyPart * {
  margin: 0;
  padding: 0;
}

#shopByBodyPart dt {
  width: 100%;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 60px;
}

#shopByBodyPart dd {
  width: 140px;
  height: 140px;
  color: #6a6a6a;
  font-weight: lighter;
  text-align: center;
  font-size: 14px;
  padding-top: 120px;
  margin: 0 40px 50px;
  cursor: pointer;
  position: relative;
  opacity: 0.6;
  transition: opacity 0.3s;
}

#shopByBodyPart dd:hover {
  opacity: 1;
}

#shopByBodyPart dd>a{
  display:inline-block;
  position:relative;
}

#shopByBodyPart dd>a::before {
  content: "";
  width: 100px;
  height: 100px;
  display: block;
  /*position: absolute;
  top: 0;
  left: 20px;*/
  transform: scale(0.8);
  background: url("https://cdn.shopify.com/s/files/1/0032/9370/8323/files/massage-part-all-min.png?6661") no-repeat 0 0;
  background-size: 500px auto;
}

#shopByBodyPart dd:nth-of-type(1)>a::before {
  background-position: -300px 0
}

#shopByBodyPart dd:nth-of-type(2)>a::before {
  background-position: 0 0
}

#shopByBodyPart dd:nth-of-type(3)>a::before {
  background-position: -400px 0
}

#shopByBodyPart dd:nth-of-type(4)>a::before {
  background-position: -200px 0
}

#shopByBodyPart dd:nth-of-type(5)>a::before {
  background-position: -100px 0
}

#shopByBodyPart dd:nth-of-type(1)>a:hover::before {
  animation: steps-8 1s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(2)>a:hover::before {
  animation: steps-8 1s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(3)>a:hover::before {
  animation: steps-6 0.6s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(4)>a:hover::before {
  animation: steps-13 1s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(5)>a:hover::before {}

@media screen and (max-width: 540px) {
  #shopByBodyPart dd {
    width: 120px;
    margin: 0 20px 20px;
  }
  #shopByBodyPart dd>a::before {
    left: 10px;
  }
}


/** animation part start */

@keyframes steps-8 {
  0% {
    background-position-y: 0;
  }
  12.5% {
    background-position-y: -100px;
  }
  25% {
    background-position-y: -200px;
  }
  37.5% {
    background-position-y: -300px;
  }
  50% {
    background-position-y: -400px;
  }
  62.5% {
    background-position-y: -500px;
  }
  75% {
    background-position-y: -600px;
  }
  87.5% {
    background-position-y: -700px;
  }
  100% {
    background-position-y: -800px;
  }
}

@keyframes steps-16 {
  0% {
    background-position-y: 0
  }
  6.25% {
    background-position-y: -100px
  }
  12.5% {
    background-position-y: -200px
  }
  18.75% {
    background-position-y: -300px
  }
  25% {
    background-position-y: -400px
  }
  31.25% {
    background-position-y: -500px
  }
  37.5% {
    background-position-y: -600px
  }
  43.75% {
    background-position-y: -700px
  }
  50% {
    background-position-y: -800px
  }
  56.25% {
    background-position-y: -900px
  }
  62.5% {
    background-position-y: -1000px
  }
  68.75% {
    background-position-y: -1100px
  }
  75% {
    background-position-y: -1200px
  }
  81.25% {
    background-position-y: -1300px
  }
  87.5% {
    background-position-y: -1400px
  }
  93.75% {
    background-position-y: -1500px
  }
  100% {
    background-position-y: -1600px
  }
}

@keyframes steps-13 {
  0% {
    background-position-y: 0
  }
  7.6923076923076925% {
    background-position-y: -100px
  }
  15.384615384615385% {
    background-position-y: -200px
  }
  23.076923076923077% {
    background-position-y: -300px
  }
  30.76923076923077% {
    background-position-y: -400px
  }
  38.46153846153846% {
    background-position-y: -500px
  }
  46.15384615384615% {
    background-position-y: -600px
  }
  53.84615384615385% {
    background-position-y: -700px
  }
  61.53846153846154% {
    background-position-y: -800px
  }
  69.23076923076923% {
    background-position-y: -900px
  }
  76.92307692307692% {
    background-position-y: -1000px
  }
  84.61538461538461% {
    background-position-y: -1100px
  }
  92.3076923076923% {
    background-position-y: -1200px
  }
  100% {
    background-position-y: -1300px
  }
}

@keyframes steps-6 {
  0% {
    background-position-y: 0
  }
  16.666666666666668% {
    background-position-y: -100px
  }
  33.333333333333336% {
    background-position-y: -200px
  }
  50% {
    background-position-y: -300px
  }
  66.66666666666667% {
    background-position-y: -400px
  }
  83.33333333333334% {
    background-position-y: -500px
  }
  100% {
    background-position-y: -600px
  }
}
<dl id="shopByBodyPart">
  <dt>SHOP BY BODY PART</dt>
  <dd><a href="https://www.naipo.co.il/collections/neck-and-shoulder">Neck &amp; Shoulder</a></dd>
  <dd><a href="https://www.naipo.co.il/collections/back-massager">Back</a></dd>
  <dd><a href="https://www.naipo.co.il/collections/back-massager">Waist</a></dd>
  <dd><a href="https://www.naipo.co.il/collections/leg-foot-massager
  ">Leg &amp; Foot</a></dd>
  <dd><a href="https://www.naipo.co.il/collections/full-body-massager">Full Body</a></dd>
</dl>

CodePudding user response：

a tags can link to external sites, where you need to put the full url, but when linking to the same site, the relative path is appropriate.

Provide a relative path to your other html files where you want to navigate when the user clicks the icons.

Ex:

<dd><a href="https://www.naipo.co.il/collections/back-massager">Waist</a></dd>

Might be:

<dd><a href="./collections/back-massager.html">Waist</a></dd>

That all depends on where your html files are located. Change the path to match the folder structure. Read up on html file paths if you get stuck.

CodePudding user response：

You have put your <a> elements inside the <dd> elements. Just reverse them so that the <dd> is inside the <a>, like this:

#shopByBodyPart {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#shopByBodyPart * {
  margin: 0;
  padding: 0;
}

#shopByBodyPart dt {
  width: 100%;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 60px;
}

#shopByBodyPart dd {
  width: 140px;
  height: 140px;
  color: #6a6a6a;
  font-weight: lighter;
  text-align: center;
  font-size: 14px;
  padding-top: 120px;
  margin: 0 40px 50px;
  cursor: pointer;
  position: relative;
  opacity: 0.6;
  transition: opacity 0.3s;
}

#shopByBodyPart dd:hover {
  opacity: 1;
}

#shopByBodyPart dd::before {
  content: "";
  width: 100px;
  height: 100px;
  display: block;
  position: absolute;
  top: 0;
  left: 20px;
  transform: scale(0.8);
  background: url("https://cdn.shopify.com/s/files/1/0032/9370/8323/files/massage-part-all-min.png?6661") no-repeat 0 0;
  background-size: 500px auto;
}

#shopByBodyPart dd:nth-of-type(1)::before {
  background-position: -300px 0
}

#shopByBodyPart dd:nth-of-type(2)::before {
  background-position: 0 0
}

#shopByBodyPart dd:nth-of-type(3)::before {
  background-position: -400px 0
}

#shopByBodyPart dd:nth-of-type(4)::before {
  background-position: -200px 0
}

#shopByBodyPart dd:nth-of-type(5)::before {
  background-position: -100px 0
}

#shopByBodyPart dd:nth-of-type(1):hover::before {
  animation: steps-8 1s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(2):hover::before {
  animation: steps-8 1s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(3):hover::before {
  animation: steps-6 0.6s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(4):hover::before {
  animation: steps-13 1s steps(1) forwards;
}

#shopByBodyPart dd:nth-of-type(5):hover::before {}

@media screen and (max-width: 540px) {
  #shopByBodyPart dd {
    width: 120px;
    margin: 0 20px 20px;
  }
  #shopByBodyPart dd::before {
    left: 10px;
  }
}


/** animation part start */

@keyframes steps-8 {
  0% {
    background-position-y: 0;
  }
  12.5% {
    background-position-y: -100px;
  }
  25% {
    background-position-y: -200px;
  }
  37.5% {
    background-position-y: -300px;
  }
  50% {
    background-position-y: -400px;
  }
  62.5% {
    background-position-y: -500px;
  }
  75% {
    background-position-y: -600px;
  }
  87.5% {
    background-position-y: -700px;
  }
  100% {
    background-position-y: -800px;
  }
}

@keyframes steps-16 {
  0% {
    background-position-y: 0
  }
  6.25% {
    background-position-y: -100px
  }
  12.5% {
    background-position-y: -200px
  }
  18.75% {
    background-position-y: -300px
  }
  25% {
    background-position-y: -400px
  }
  31.25% {
    background-position-y: -500px
  }
  37.5% {
    background-position-y: -600px
  }
  43.75% {
    background-position-y: -700px
  }
  50% {
    background-position-y: -800px
  }
  56.25% {
    background-position-y: -900px
  }
  62.5% {
    background-position-y: -1000px
  }
  68.75% {
    background-position-y: -1100px
  }
  75% {
    background-position-y: -1200px
  }
  81.25% {
    background-position-y: -1300px
  }
  87.5% {
    background-position-y: -1400px
  }
  93.75% {
    background-position-y: -1500px
  }
  100% {
    background-position-y: -1600px
  }
}

@keyframes steps-13 {
  0% {
    background-position-y: 0
  }
  7.6923076923076925% {
    background-position-y: -100px
  }
  15.384615384615385% {
    background-position-y: -200px
  }
  23.076923076923077% {
    background-position-y: -300px
  }
  30.76923076923077% {
    background-position-y: -400px
  }
  38.46153846153846% {
    background-position-y: -500px
  }
  46.15384615384615% {
    background-position-y: -600px
  }
  53.84615384615385% {
    background-position-y: -700px
  }
  61.53846153846154% {
    background-position-y: -800px
  }
  69.23076923076923% {
    background-position-y: -900px
  }
  76.92307692307692% {
    background-position-y: -1000px
  }
  84.61538461538461% {
    background-position-y: -1100px
  }
  92.3076923076923% {
    background-position-y: -1200px
  }
  100% {
    background-position-y: -1300px
  }
}

@keyframes steps-6 {
  0% {
    background-position-y: 0
  }
  16.666666666666668% {
    background-position-y: -100px
  }
  33.333333333333336% {
    background-position-y: -200px
  }
  50% {
    background-position-y: -300px
  }
  66.66666666666667% {
    background-position-y: -400px
  }
  83.33333333333334% {
    background-position-y: -500px
  }
  100% {
    background-position-y: -600px
  }
}
<dl id="shopByBodyPart">
  <dt>SHOP BY BODY PART</dt>
  <a href="https://www.naipo.co.il/collections/neck-and-shoulder"><dd>Neck &amp; Shoulder</dd></a>
  <a href="https://www.naipo.co.il/collections/back-massager"><dd>Back</dd></a>
  <a href="https://www.naipo.co.il/collections/back-massager"><dd>Waist</dd></a>
  <a href="https://www.naipo.co.il/collections/leg-foot-massager
  "><dd>Leg &amp; Foot</dd></a>
  <a href="https://www.naipo.co.il/collections/full-body-massager"><dd>Full Body</dd></a>
</dl>

CodePudding user response：

Use a <span> tag to include an icon.

Example:

  • I. HTML:
<dl>
    <dt>SHOP BY BODY PART</dt>
    <dd>
        <a href="/" id="example-link">
            <span id="example-icon"></span>
            Opt. 1
        </a>
    </dd>
</dl>
  • II. CSS:
a#example-link > span#example-icon::after {
    background: url("https://cdn.shopify.com/s/files/1/0032/9370/8323/files/massage-part-all-min.png?6661") no-repeat 0 0;
    background-size: 500px auto;
}

Page link：https//www.codepudding.com/net/464637.html

Prev:C# letting user type inputs in any order by adding specific keywords and designate them to their str
Next:Inappropriate value for attribute "security_groups": element 0: string required
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding