How to change text type in a list with Jquery?

Asked

Viewed 65 times

1

How can I make an effect on the text inside the lists with Jquery?

For example, when the mouse hovers over the text in the lists, the color becomes lighter and the text is underlined.

p {
  line-height: 1em;
}

h1,
h2,
h3,
h4 {
  color: orange;
  font-weight: normal;
  line-height: 1.1em;
  margin: 0 0 .5em 0;
}

h1 {
  font-size: 1.7em;
}

h2 {
  font-size: 1.5em;
}

a {
  color: black;
  text-decoration: none;
}

body {
  font-family: arial;
  font-size: 80%;
  line-height: 1.2em;
  width: 100%;
  margin: 0;
  background: #eee;
}

#pagina {
  margin: 20px;
}

#logo {
  width: 35%;
  margin-top: 5px;
  font-family: georgia;
  display: inline-block;
  text-decoration: underline;
}

#nav {
  width: 60%;
  text-align: right;
  float: right;
}

#nav ul li {
  display: inline-block;
  height: 62px;
}

#nav ul li a {
  padding: 20px;
  background: orange;
  color: white;
}

#conteudo {
  margin: 30px 0;
  padding: 20px;
  clear: both;
  background-color: whitesmoke;
}

#rodape {
  border-bottom: 1px #ccc solid;
  margin-bottom: 10px;
}

#rodape p {
  text-align: right;
  text-transform: uppercase;
  font-size: 80%;
  color: grey;
}

.caixa {
  box-shadow: 0px 1px 1px #999;
}

.caixa-redonda {
  box-shadow: 0px 1px 1px #999;
  border-radius: 20%;
}
<header>
  <div id="logo">
    <h1>>O nosso Web Site</h1>
  </div>
  <nav id="nav">
    <ul>
      <li><a class="caixa" href="index.html">Início</a></li>
      <li><a class="caixa" href="#sobre.html">Sobre</a></li>
      <li><a class="caixa" href="contactar.html">Contactar</a></li>
    </ul>
  </nav>
</header>

<section id="pagina">
  <div id="conteudo" class="caixa">
    <h2>Início</h2>
    <p>
      Este é o meu site! Consegui codificar todo o HTML e CSS de modo a este funcionar. Atenção Mundo da Web que acabei de chegar!!!
    </p>
    <p>
      Vou usar as minhas aptidões para criar todo o tipo de websites, inclusive para a disciplina de RC.
    </p>
  </div>
</section>

<footer>
  <p>
    Página Criada por: <a href="/" target="_blank">[Davide]</a>
  </p>
</footer>

javascript html jquery css

  • 1 - Edit your question and put your code here. 2 - What effect are you referring to?

  • Could you elaborate better on what kind of effect you’re looking to make?

  • You want to do an effect like what?

  • For example, when the mouse hovers over the text in the lists, the color becomes lighter and the text is underlined

  • The code is this: https://jsfiddle.net/50qcszhe/

2 answers

3


Just add this code to your css

#nav ul li a:hover {
  text-decoration: underline; /* deixa o texto sublinhado */
  background: rgba(250,180,74,0.5); /* deixa o laranja com uma opacidade*/
}

If you want a smooth transition of colors use transition: background 500ms linear; in his #nav ul li a { ... }

See how it goes in the code

  p {
  line-height: 1em;
}

h1,
h2,
h3,
h4 {
  color: orange;
  font-weight: normal;
  line-height: 1.1em;
  margin: 0 0 .5em 0;
}

h1 {
  font-size: 1.7em;
}

h2 {
  font-size: 1.5em;
}

a {
  color: black;
  text-decoration: none;
}

body {
  font-family: arial;
  font-size: 80%;
  line-height: 1.2em;
  width: 100%;
  margin: 0;
  background: #eee;
}

#pagina {
  margin: 20px;
}

#logo {
  width: 35%;
  margin-top: 5px;
  font-family: georgia;
  display: inline-block;
  text-decoration: underline;
}

#nav {
  width: 60%;
  text-align: right;
  float: right;
}

#nav ul li {
  display: inline-block;
  height: 62px;
}

#nav ul li a {
  padding: 20px;
  background: orange;
  color: white;
transition: background 500ms linear; /* faza  transição suave dascores */
}
#nav ul li a:hover {
  text-decoration: underline;
  background: rgba(250,180,74,0.5);
}

#conteudo {
  margin: 30px 0;
  padding: 20px;
  clear: both;
  background-color: whitesmoke;
}

#rodape {
  border-bottom: 1px #ccc solid;
  margin-bottom: 10px;
}

#rodape p {
  text-align: right;
  text-transform: uppercase;
  font-size: 80%;
  color: grey;
}

.caixa {
  box-shadow: 0px 1px 1px #999;
}

.caixa-redonda {
  box-shadow: 0px 1px 1px #999;
  border-radius: 20%;
}
<header>
        <div id="logo">
          <h1>>O nosso Web Site</h1>
        </div>
        <nav id="nav">
          <ul>
            <li><a class="caixa" href="index.html">Início</a></li>
            <li><a class="caixa" href="#sobre.html">Sobre</a></li>
            <li><a class="caixa" href="contactar.html">Contactar</a></li>
          </ul>
        </nav>
      </header>
  
      <section id="pagina">
        <div id="conteudo" class="caixa">
          <h2>Início</h2>
          <p>
            Este é o meu site! Consegui codificar todo o HTML e CSS de modo a este funcionar. Atenção Mundo da Web que acabei de chegar!!!
          </p>
          <p>
            Vou usar as minhas aptidões para criar todo o tipo de websites, inclusive para a disciplina de RC.
          </p>
        </div>
      </section>
  
      <footer>
        <p>
          Página Criada por: <a href="/" target="_blank">[Davide]</a>
        </p>
      </footer>

  • Thanks! I really needed this :D

  • 1

    @Cool Rodrigues that worked out there study the code well! The answer helped you somehow consider marking it as Accept, in this icon below the arrows on the left side of the answer you choose. So the site does not get its open question even though it has already been solved.

  • 1

    Thank you! I’ve done it, now I have to continue the code

  • @D.Rodrigues followed with the work, and we are always here to help if you have another question! ;)

  • Actually, I need help with something in php! I need to tell the user your pass, only with the first 3 letters with asteric and the others without asteric!

  • I don’t know if you can help now, but I have PHP like this: <? php $user = $_POST["user"]; $pass = $_POST["pass"]; if ($user != null && $pass != null) echo "Welcome ". $user ." , your pass is this: ". $pass; Else echo "You have to try again"; ?>

  • @D.Rodrigues I don’t know anything about PHP rss, but I recommend you to open a New Question,. put your code and a detailed explanation. Here on the site there are a lot of excellent people in PHP who will answer you quickly!

  • @D.Rodrigues: $pass = substr($pass, 0, 3) . '***';

  • 1

    I managed to do what I needed, thank you!

Show 4 more comments

0

That’s what you want to do, you get it with CSS even, you don’t need JS.

Just add these lines to your CSS

#conteudo:hover {
  text-decoration: underline;
  background-color: #999;
}

The magic is on the property :hover, that applies the style exactly when you hover over the element that is your freight (elemento:hover), you can see more HERE 

p {
  line-height: 1em;
}

h1,
h2,
h3,
h4 {
  color: orange;
  font-weight: normal;
  line-height: 1.1em;
  margin: 0 0 .5em 0;
}

h1 {
  font-size: 1.7em;
}

h2 {
  font-size: 1.5em;
}

a {
  color: black;
  text-decoration: none;
}

body {
  font-family: arial;
  font-size: 80%;
  line-height: 1.2em;
  width: 100%;
  margin: 0;
  background: #eee;
}

#pagina {
  margin: 20px;
}

#logo {
  width: 35%;
  margin-top: 5px;
  font-family: georgia;
  display: inline-block;
  text-decoration: underline;
}

#nav {
  width: 60%;
  text-align: right;
  float: right;
}

#nav ul li {
  display: inline-block;
  height: 62px;
}

#nav ul li a {
  padding: 20px;
  background: orange;
  color: white;
}

#conteudo {
  margin: 30px 0;
  padding: 20px;
  clear: both;
  background-color: whitesmoke;
}

#conteudo:hover {
  text-decoration: underline;
  background-color: #999;
}

#rodape {
  border-bottom: 1px #ccc solid;
  margin-bottom: 10px;
}

#rodape p {
  text-align: right;
  text-transform: uppercase;
  font-size: 80%;
  color: grey;
}

.caixa {
  box-shadow: 0px 1px 1px #999;
}

.caixa-redonda {
  box-shadow: 0px 1px 1px #999;
  border-radius: 20%;
}
<!DOCTYPE html>
<html lang="pt-PT">

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="author" content="Os vossos nomes" />
    <meta name="description" content="" />

    <link rel="stylesheet" href="estilos.css" type="text/css" />
    <script src="jquery-3.1.1.min.js"></script>


    <title>O meu Website de RC</title>



  </head>

  <body>

    <header>
      <div id="logo">
        <h1>>O nosso Web Site</h1>
      </div>
      <nav id="nav">
        <ul>
          <li><a class="caixa" href="index.html">Início</a></li>
          <li><a class="caixa" href="#sobre.html">Sobre</a></li>
          <li><a class="caixa" href="contactar.html">Contactar</a></li>
        </ul>
      </nav>
    </header>

    <section id="pagina">
      <div id="conteudo" class="caixa">
        <h2>Início</h2>
        <p>
          Este é o meu site! Consegui codificar todo o HTML e CSS de modo a este funcionar. Atenção Mundo da Web que acabei de chegar!!!
        </p>
        <p>
          Vou usar as minhas aptidões para criar todo o tipo de websites, inclusive para a disciplina de RC.
        </p>
      </div>
    </section>

    <footer>
      <p>
        Página Criada por: <a href="/" target="_blank">[Davide]</a>
      </p>
    </footer>

  </body>

</html>

  • 1

    Sorry, I ended up adding what you wanted on Card kkk Just follow the answer from Ugo that will work, but if you want on Card you can follow my kkk

  • No problem, thank you!

  • Very good the answer Eduardo.

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.