1

Como é que eu posso fazer um efeito no texto dentro das listas com JQuery?

Por exemplo, quando o rato passa por cima do texto nas listas, a cor fica mais clara e o texto fica sublinhado.

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>

5
  • 1 - Edite sua pergunta e coloque seu código aqui. 2 - Que efeito está se referindo?
    – Jorge.M
    13/12/2018 às 20:23
  • Poderia detalhar melhor que tipo de efeito você está querendo fazer? 13/12/2018 às 20:27
  • Vc quer fazer um efeito tipo o que?
    – hugocsl
    13/12/2018 às 20:31
  • Por exemplo, quando o rato passa por cima do texto nas listas, a cor fica mais clara e o texto fica sublinhado 13/12/2018 às 20:37
  • O código é este: jsfiddle.net/50qcszhe 13/12/2018 às 20:49

2 Respostas 2

3

Basta vc incluir esse código no seu 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*/
}

Se quiser uma transição suave das cores use transition: background 500ms linear; na sua #nav ul li a { ... }

Veja como fica direto no código

  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>

9
  • Obrigado! Estava mesmo a precisar disto :D 13/12/2018 às 21:16
  • 1
    @D.Rodrigues legal que deu certo ai estude bem os código! Sealguma resposta te ajudou de alguma forma considere marca-la como Aceita, nesse ícone ✔ abaixo das setinhas no lado esquerdo da resposta que vc escolher. Assim o site não fica com sua pergunta aberta mesmo já tendo sido resolvida.
    – hugocsl
    13/12/2018 às 21:27
  • 1
    Obrigado! Já o fiz, agora tenho que continuar o código 13/12/2018 às 21:45
  • @D.Rodrigues segui com o trabalho, e sempre estamos aqui para ajudar caso tenha outra dúvida! ;)
    – hugocsl
    13/12/2018 às 21:46
  • 1
    Consegui fazer o que precisava, obrigado! 15/12/2018 às 16:32
0

Isso que você quer fazer, você consegue com CSS mesmo, não precisa de JS.

Basta adicionar essas linhas no seu CSS

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

A mágica está na propriedade :hover, que aplica o estilo exatamente quando se passa o mouse em cima do elemento que está a sua frete (elemento:hover), você pode ver mais AQUI

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>

3
  • 1
    Desculpa, acabei adicionando o que você queria no Card kkk É só seguir a resposta do hugo que vai dar certo, mas se quiser no Card pode seguir a minha kkk 13/12/2018 às 20:58
  • Não há problema, obrigado! 13/12/2018 às 21:16
  • Muito boa a resposta Eduardo.
    – user89389
    21/12/2018 às 13:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .