How to change the type of text in a list with JQuery?

Question

How to change the type of text in a list with JQuery?

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

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

For example, when the mouse rolls over the text in the lists, the color becomes clearer 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

asked by anonymous 13.12.2018 / 21:21

2 answers

2

What you want to do, you get with CSS, you do not need JS.

Just add these lines in your CSS

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

The magic is in the :hover property, which applies the style exactly when you mouse over the element that is in 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>

13.12.2018 / 21:56

How to create a list and put other lists in? Change site background with script according to day time

score 3 · Accepted Answer

Just include this code in 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 color transition use transition: background 500ms linear; in your #nav ul li a { ... }

See how it goes straight into 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>