2
I am doing an exercise that is necessary to create a website for an advertising agency. I did everything right but I’m having a lot of difficulty with a feature. I want to pass the mouse about a <article> with a id change the background.
The last excerpt from CSS #site:hover ~servicosjs You should do it but you’re not doing it.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Projeção - M</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lateef" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Michroma" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Calligraffitti" rel="stylesheet">
</head>
<body>
<nav class="links">
<label for="rd_home">Home</label>
<label for="rd_servicos">Serviços</label>
<label for="rd_fale_conosco">Fale Conosco</label>
</nav>
<div class="scroll">
<input type="radio" name="grupo" id="rd_home" checked="true">
<input type="radio" name="grupo" id="rd_servicos">
<input type="radio" name="grupo" id="rd_fale_conosco">
<div class="sections">
<div class="bloco" id="homejs">
<div id="conteiner_home">
<div id=conteiner_form1>
<H1>Projeção - M</H1>
<br>
<br>
<br>
<u><p>Impulsionamos a visibilidade do seu negocio na internet. </p></u>
</div>
</div>
</div>
<div class="bloco" id="servicosjs">
<div id="conteiner_servicos">
<article class="item" id="site";>
<h3>Sites</h3>
<p>Desenvolvemos e otimizamos sites para ser de facil leitura e indexação nos motores de busca. </p>
<br>
<br>
</article>
<article class="item" id="mapa">
<h3>Mapas</h3>
<p>Cadastramos estabelecimentos no google Maps, microsoft Bing mapas e Apple maps connect. </p>
<br>
<br>
</article>
<article class="item" id="publicidade">
<h3>Publicidade Digital</h3>
<p>Divulgamos sites do seu nogocio nos sistemas de buscas Google e Microsoft Bing. </p>
</article>
<br>
</div>
</div>
<div class="bloco" id="fale_conoscojs">
<div id=conteiner_fale_conosco>
<div id=conteiner_form3>
<form name="fomrcontato" action="" method="post">
<center><h1>Contato</h1></center>
<p class="formulario">
<input type="text" name="nome" placeholder="Seu nome" required="required">
</p>
<p class="formulario">
<input type="text" name="empresa" placeholder="Empresa">
</p>
<p class="formulario">
<input type="email" name="email" placeholder="Email" required="required">
</p>
<p class="formulario">
<input type="text" name="telefone" placeholder="Telefone" required="required">
</p>
<p class="formulario">
<input type="text" name="assunto" placeholder="Qual o motivo do contato ?" required="required">
</p>
<p class="formulario">
<textarea name="mensagem" placeholder="Deixe sua mensagem "></textarea>
</p>
<center><p class="enviar">
<input type="submit" name="enviar" value="enviar">
</p></center>
</form>
</div>
</div>
</div>
</div>
<footer class="rodape">
<p class="copyright">
Copyright © Projeção - M. Todos os direitos reservados.
</p>
</footer>
</div>
</body>
</html>
<?php
$emailEnviar = "[email protected]";
$nome = $_POST['nome'];
$empresa = $_POST['empresa'];
$email = $_POST['email'];
$telefone = $_POST['telefone'];
$assunto = $_POST['assunto'];
$mensagem = $_POST['mensagem'];
if($_post['enviar'])(
mail("$emailEnviar","assunto","
Email enviado pelo site:
Nome: $nome
Empresa: $empresa
email: $email
telefone: $telefone
assunto: $assunto
---
mensagem: $mensagem
");
)
?>
CSS:
*{
margin: 0;
padding: 0;
}
* p{
font-family: 'Lateef', cursive;
font-size: 150%;
display: flex;
}
* h2{
font-family: 'Berkshire Swash', cursive;
}
* h1{
font-family: 'Michroma', sans-serif;
}
.links{
width: 100vw;
height: 50px;
position: fixed;
display: flex;
background-color: rgba(0,0,0,.5);
}
.links label{
padding: 10px 0;
flex-grow: 1;
cursor: pointer;
transition: all .4s;
text-align: center;
font-family: 'Arial';
font-size: 100%;
color: #fff;
}
.links label:hover{
background-color: rgba(255,255,255,.3);
}
.links label{
font-family: 'Cinzel', serif;
font-size: 150%;
}
.rodape {
color: rgb(255,255,255);
margin-top: 95vh;
width: 100vw;
height: 50px;
position: fixed;
display: flex;
background-color: rgba(0,0,0,.5);
text-align: center;
}
.rodape p{
margin-left: 40vw;
}
.scroll input {
display: none;
}
.bloco{
width: 100vw;
height: 100vh;
display: flex;
}
.preço{
visibility: hidden;
}
.scroll{
display: flex;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.sections{
transition: all .4s;
}
.item{
display: block;
margin: 20px;
padding: 10px;
align-items: center;
height: 45vh;
width: 75vw;
background-color: rgba(192,192,192,.5);
border-radius: 30px;
}
.item h3{
font-family: 'Bangers', cursive;
text-align: center;
font-size: 200%;
}
.item p{
text-align: justify;
margin-top: 5vh;
margin-bottom: 5vh;
}
.item h2{
text-align: center;
}
.item:hover{
background-color: rgba(192,192,192,.7);
transition: all .5s ease-in-out;
}
.item:hover h2 {
visibility: visible;
transition: all 1s ease-in-out;
position: relative;
display: block;
}
.item:hover h4 {
visibility: visible;
transition: all 1s ease-in-out;
position: relative;
display:block; ;
}
.formulario{
margin-top: 3vh;
}
.formulario input, textarea{
width: 35vw;
padding: 1%;
position: relative;
}
.enviar input{
margin-top: 1%;
height: 4vh;
width: 6vw;
}
.formulario textarea{
height: 20vh;
}
.sections p{
text-align: justify;
}
#homejs{
background-color: #7fbd42;
background-image: url("../imagens/Home_page.png");
background-size: cover;
background-repeat: no-repeat;
}
#homejs p{
font-family: 'Calligraffitti', cursive;
font-size: 200%;
}
#servicosjs{
background-image: url("../imagens/Servicos.png");
background-size: cover;
background-repeat: no-repeat;
align-items: center;
}
#precojs{
background-color: #414950;
}
#fale_conoscojs{
background-color: #aaa;
background-image: url("../imagens/Fale_conosco.png");
background-size: cover;
background-repeat: no-repeat;
}
#fale_conoscojs form input{
display: block;
}
#rd_home:checked ~ .sections{
margin-top:0vh;
}
#rd_servicos:checked ~ .sections{
margin-top:-100vh;
}
#rd_fale_conosco:checked ~ .sections{
margin-top:-200vh;
}
#conteiner_servicos {
background-color: rgba(169,169,169,.5);
align-items: center;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
#conteiner_home{
background-color: rgba(169,169,169,.5);
width: 100vw;
height: 100vh;
}
#conteiner_fale_conosco{
background-color: rgba(169,169,169,.5);
width: 100vw;
height: 100vh;
}
#conteiner_fale_conosco form{
margin: 0 auto;
margin-top: 13vh;
}
#conteiner_form1{
width: 180vh;
height: 90vw;
margin-top: 40vh;
margin-left: 35vw;
}
#conteiner_form3{
width: 50vh;
height: 50vw;
margin-left:10%;
position: relative;
}
#site:hover ~ #servicosjs{
background-image: background-image: url("../imagens/Sites.png");
background-size: cover;
background-repeat: no-repeat;
transition: all 1s ease-in-out;
}
The
~means the (s) element(s) "brother(s)" and not the "father" element, so it will not work. In your case it is necessary to use Javascript (eventsmouseenterto implement the amendments andmoueleaveto reverse the changes).– Valdeir Psr