Question 237540 in CSS Question posted in
Some basic documentation can be found here.

CSS dashed stroke hover

I’m trying to create a smooth transition when hovering over a selection. However, I added some text that has a stroke that is dashed. I am trying to include a smooth hover effect onto the text when a mouse hovers over it. For the life of me I cannot figure this out.

Please go to the CodePen for more examples

#box3 {
  margin-top: 150px;
  height: 300px;
  width: 300px;
  margin: auto;
  background-color: #f2ece2;
  border: 1px dashed black;
  transition: background-color 0.3s, box-shadow 0.3s, border 0.3s, color 0.3s, transform 0.3s;
}

#box3:hover {
  box-shadow: 5px 5px 0 black;
  background-color: #ede2ce;
  border: 1px solid black;
  cursor: pointer;
}

#dashedText {
  transition: stroke-dashoffset 0.3s ease;
}

#dashedText:hover {
  color: black;
}
<div id='box3' class='btn-1'>
  <h1>
    <svg width="400" height="100">
    <text id='dashedText' x="10" y="50" font-size="36" font-weight="bold" fill="none" stroke="black"  
    stroke-dasharray="4,2">
      Hello There
    </text>
  </h1>
</div>
Tags:

2

Answers


  1. 0

    In SVG, the color property doesn’t directly control the color of the text. In your case, you are working with an SVG text element, and that’s why changing the color property did not have an effect. You need to use fill property to change the text color on hover.

    #dashedText:hover {
    fill: black;
}
    Login or Signup to reply.
  2. 0

    I think you have missed to added javaScript code. Example that you have provided thare is used HTML, CSS for this box hover effect and Javascript for text hover effect may be you have not added javascript. Check below for working example.

    Hi, I think you have missed to added javaScript code. Example that you have provided thare is used HTML, CSS for this box hover effect and Javascript for text hover effect may be you have not added javascript. Check below for working example.

    const dashedText = document.getElementById("dashedText");

dashedText.addEventListener("mouseenter", () => {
 dashedText.style.strokeDashoffset = "0";
});

dashedText.addEventListener("mouseleave", () => {
 dashedText.style.strokeDashoffset = "20";
});
    body {
  background-color: #f2ece2;
  margin-left: 25%;
  margin-right: 25%;
  font-family: arial;
  font-weight: bold;
}

h1 {
  text-align: center;
}

#row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

#box {
  margin-top: 150px;
  height: 300px;
  width: 300px;
  margin: auto;
  background-color: wheat;
  border: 1px dashed black;
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

#box:hover {
  box-shadow: -10px 8px 0px black;
  background-color: wheat;
  cursor: pointer;
}

#box3 {
  margin-top: 150px;
  height: 300px;
  width: 300px;
  margin: auto;
  background-color: #f2ece2;
  border: 1px dashed black;
  transition: background-color 0.3s, box-shadow 0.3s, border 0.3s,
    color 0.3s, transform 0.3s;
}

#box3:hover {
  box-shadow: 5px 5px 0 black;
  background-color: #ede2ce;
  border: 1px solid black;
  cursor: pointer;
}

#dashedText {
  transition: stroke-dashoffset 0.3s ease;
}

#dashedText:hover {
  color: black;
}
    <div id="row">
  <div id="box3" class="btn-1">
    <h1>
      <svg width="400" height="100">
        <text
          id="dashedText"
          x="10"
          y="50"
          font-size="36"
          font-weight="bold"
          fill="none"
          stroke="black"
          stroke-dasharray="4,2"
        >
          Hello There
        </text>
      </svg>
    </h1>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search