Question 43515 in Html Question posted in
Some basic documentation can be found here.

Adding url link to html marquee

I’m new to coding and trying to figure out how to add a link to my marquee. I would also like for there to be no colour change or underline animation. Any suggestions?

.Marquee {
  color: #da6fe2;
  background-color: transparent;
  font-family: work sans;
  font-size: 34px;
  line-height: 50px;
  padding: 0px;
  font-weight: bold;
}
<marquee class="Marquee" direction="right" scrollamount="4" behavior="scroll">HELLO &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HELLO &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HELLO &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HELLO &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HELLO</marquee>

I tried to add but for some reason it overwrites the style when I do this.

Tags:

2

Answers


  1. 0

    The simple solution is, You can put marquee tag inside <a> tag.

    .Marquee {
  color: #da6fe2;
  background-color: transparent;
  font-family: work sans;
  font-size: 34px;
  line-height: 50px;
  padding: 0px;
  font-weight: bold;
}
    <a href = "https://stackoverflow.com"><marquee class="Marquee" direction="right" scrollamount="4" behavior="scroll">HELLO &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HELLO &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HELLO &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HELLO &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HELLO</marquee></a>
    Login or Signup to reply.
  2. 0

    You can do it by adding something like this :

    <a href="http://www.google.com" 
   onmouseover="this.parentNode.stop()" 
   onmouseout="this.parentNode.start()">HELLO</a>
</marquee>

    And to make the link not overwrites the style you can add this to style :

    .Marquee a {
       text-decoration:none;
       color: #da6fe2;
 }

    .Marquee {
  color: #da6fe2;
  background-color: transparent;
  font-family: work sans;
  font-size: 34px;
  line-height: 50px;
  padding: 0px;
  font-weight: bold;
}

.Marquee a {
   text-decoration:none;
   color: #da6fe2;
}

.Marquee a:hover {
   color: red;
}
    <marquee class="Marquee" direction="right" scrollamount="4" behavior="scroll">HELLO 
<a href="http://www.google.com" 
   onmouseover="this.parentNode.stop()" 
   onmouseout="this.parentNode.start()">
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HELLO     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HELLO &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HELLO &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HELLO

</a>
</marquee>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search