Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

murilo marchesi

Problemas com o Hover

Por , em Desenvolvimento frontend

Recommended Posts

murilo marchesi    0

murilo marchesi
Postado

pessoal estou com um menu retratil que funciona direitinho ,mais ao adicionar outras divs  ( fiz uma box e uma box pra um banner) o meu hover só funciona quando coloca o cursor bem no cantinho do texto - (editado) achei o conflito - esta na tag <nav>que fiz para criar uma nova div ,tirei ela o hover voltou ao normal ,mais dai só uma div funciona ! ps : ja tentei por "  <div class="class1 class2></div> mais nao funcionou ,só uma div que funciona tbm

.link:hover {
    background-color:#F51D1D;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

murilo marchesi    0

murilo marchesi
Postado

Bom dia Codercss ,postei mais nao consegui resolver ainda :@ se puder me ajudar ficarei muito agradecido

o html :  

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css"  href="testeretratile.css" />
    <link rel="stylesheet" type="text/css"  href="pace.css" />
  <link rel="stylesheet" type="text/css"  href="bordertest.css" />
<style> 
</style>
<meta charset="UTF-8">
    <title>testano</title>
    </head>
<body>
<input type="checkbox" id="check">
<label id="icone" for="check"><img src="icone.png"></label>
<div class="barra">
<nav>
   <a href="menuretratil.html"><div class="link">Home</div></a>
   <a href=""><div class="link">Tutorias</div></a>
   <a href=""><div class="link">Downloads</div></a>
   <a href=""><div class="link">Eventos</div></a>
   <a href=""><div class="link">Contato</div></a>
   <a href=""><div class="link">Preços</div></a>
 
   </nav>
   
   </div>
  
<div class="textin"> </div>
<nav>
<div class="arquivo"></div>
</nav>
</body>
</html>

 

 

e o css é :  

.textin {
    margin:900px;
    width: 50%;
    padding: 10px;
    width: 900px;
    border:2px solid #FFFFFF;
    padding: 10px;
    margin: auto;
    height:425px;
    float:center;
    margin-bottom: 1000px;
    margin-top: 20px;
    margin-left:300px;
    margin-right: 300px;
    box-shadow: 10px 10px 5px grey;
}

.arquivo{
    background-color:#f9f9f9;
      width: 1248px;
    height: 25px;    
    padding: 50px;
    border: 1px solid red;
    margin-top: 12.5cm;
   }

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • fabioseco
      Autocomplete no dw cs6
      Por fabioseco
      Como eu adiciono mais tags. Pseudoelementos tais como flex, no meu dw cs6?
    • tabl
      Por favor! Como centralizo esta tabela e preços? Ela somente fica na esquerda!
      Por tabl
      <style> body, input, textarea { font: 12px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; background-color: #FAFAFA; color: #656565; } .pricing-table { display: inline-block; margin-top: 20px; margin-bottom: 0; width: 100%; } .layers { box-shadow: 0 1px 1px rgba(0, 0, 0, 0),0 8px 0 -5px #FCFCFC,0 8px 1px -4px rgba(0, 0, 0, 0.15),0 17px 0 -10px #FCFCFC,0 17px 1px -9px rgba(0, 0, 0, 0.15); } .clearfix:after, .clearfix:before { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } [class *="col-"] { margin: 0; position: relative; margin-right: 30px; margin-bottom: 20px; float: left; } .col-3 { width: 210px; } .plan-item { position: relative; overflow: hidden; border: 1px solid #E2E1E0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; text-align: center; background-color: #FFF; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -o-transition: all .2s linear; -ms-transition: all .2s linear; transition: all .2s linear; background-image: url(http://hbzone.hbthemes.netdna-cdn.com/themes/aegaeus_wp/wp-content/themes/AegaeusWP/images/sprites/action-border.png); background-repeat: repeat-x; background-position: center bottom; } .plan-item-header { padding: 0px 15px 15px; text-decoration: none; color: #767676; -webkit-border-top-left-radius: 2px; -webkit-border-top-right-radius: 2px; -moz-border-radius-topleft: 2px; -moz-border-radius-topright: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom: 1px solid #F4F4F4; background-color: #FCFCFC; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; } h4 { font-size: 16px; letter-spacing: -.2px; line-height: 36px; } .plan-item ul { margin: 20px 0 0; } .plan-item li, .plan-item ul { margin: 0; padding: 0; } .plan-item li, .plan-item ul { margin: 0; padding: 0; } .plan-item li:nth-child(even) { background-color: #FAFAFA; } .plan-item li { padding: 10px 20px; border-bottom: solid 1px #F4F4F4; color: #545454; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; } .plan-item-button { padding: 30px 0; } .plan-item-button a { padding: 10px 20px; background-color: #567; color: #D9D9D9; font-size: 12px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-weight: 700; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; -moz-box-shadow: inset 0 14px 0 0 rgba(190,190,190,.1); -webkit-box-shadow: inset 0 14px 0 0 rgba(190, 190, 190, 0.1); box-shadow: inset 0 14px 0 0 rgba(190, 190, 190, 0.1); text-decoration: none; } .clearfix { zoom: 1; } .plan-item ul { margin: 20px 0 0; } ol, ul { list-style: none; } .plan-item-button a:hover, .page-pagination a.current { background-color: #FF6838; } .plan-item:hover{ border-top-color: #FF6838; } li.plan-item-price { margin-top: -19px; font-size: 26px; padding: 20px; line-height: 1!important; color: #656565; font-weight: 700; } </style> <div class="pricing-table clearfix"> <div class="col-3"><div class="plan-item layers"><h4 class="plan-item-header">Simestral</h4><ul class="plan-item-features"> <li class="plan-item-price">R$000</li> <li>Válido por 6 meses</li> <li>Domínio e hospedagem inclusos</li> <li>1 E-mail Personalizado (10GB de espaço)</li> <li>Cobrada taxa mínima de Atualização</li> <li>Site seguro</li> <li>Suporte via e-mail</li> </ul><div class="plan-item-button"><a href="#">ADQUIRIR</a></div></div></div> <div class="col-3"><div class="plan-item layers"><h4 class="plan-item-header">Anual</h4><ul class="plan-item-features"> <li class="plan-item-price">R$000</li> <li>Válido por 1 Ano</li> <li>Domínio e hospedagem inclusos</li> <li>2 E-mails Personalizados (10GB de espaço)</li> <li>Desconto na taxa mínima de Atualização</li> <li>Site seguro</li> <li>Suporte via E-mail/Whatsapp</li> </ul><div class="plan-item-button"><a href="#">ADQUIRIR</a></div></div></div> <div class="col-3"><div class="plan-item layers"><h4 class="plan-item-header">Pentacampeão</h4><ul class="plan-item-features"> <li class="plan-item-price">R$000</li> <li>Válido por 5 Anos</li> <li>Domínio e hospedagem inclusos</li> <li>10 E-mails Personalizados (10GB de espaço)</li> <li>Sem taxa de Atualização</li> <li>Site seguro</li> <li>Suporte via E-mail/Whatsapp/Telefone</li> </ul><div class="plan-item-button"><a href="#">ADQUIRIR</a></div></div></div> </div>  
    • bruno4away
      HTML e CSS - Search Box
      Por bruno4away
      Gostaria de saber o que tenho que fazer, para que o botão da lupa fique no campo text de pesquisa no site:
      eu fiz os códigos:
      CSS
      .header form#quick-search{ background: transparent; border: none; padding-top: 16.25px; padding-right: 45px; float: right; } .header input#search{ color: #EAECEE; width: 194px; height: 26px; border-radius: 4px; border: 1px solid #4E699D; font-size: 20px; background-color: white; background-image: url(../images/search-icon.png); background-position: 170px; background-repeat: no-repeat; padding: 10px 10px; } HTML <form id="quick-search" method="post"> <input id="search" type="text" value="Pesquisar..."> </form> Eu gostaria de saber o que preciso para que o botão pesquisar, fique no campo de texto do lado direito, se alguém souber de uma dica..
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito