How to get Hover in Sectioning?

Asked

Viewed 175 times

0

I made a website based on a template and I’m having a little problem when I click somewhere, it goes down but it doesn’t give the effect of hover, it just gives that effect of hover in 3 section, before the last 2 which are "contact" and "customer area". html code:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <title>Eduardo Gonçalves Fotografia</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>

        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/animate.css">
        <link rel="stylesheet" href="css/templatemo_misc.css">
        <link rel="stylesheet" href="css/templatemo_style.css">

        <script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
        <link rel="shortcut icon" href="images/1437171586.ico">

    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
        <![endif]-->


        <div class="site-main" id="sTop">
            <div class="site-header">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <ul class="social-icons">
                                <li><a href="https://www.facebook.com/estudiodeimagem?pnref=lhc" class="fa fa-facebook" target="_blank"></a></li>
                                <li><a href="https://instagram.com/estudiodeimagem/" class="fa fa-instagram" target="_blank"></a></li>
                            </ul>
                        </div> <!-- /.col-md-12 -->
                    </div> <!-- /.row -->
                </div> <!-- /.container -->
                <div class="main-header">
                    <div class="container">
                        <div id="menu-wrapper">
                            <div class="row">
                                <div class="logo-wrapper col-md-4 col-sm-2 col-xs-8">

                                </div> <!-- /.logo-wrapper -->
                                <div class="col-md-8 col-sm-10 col-xs-4 main-menu text-right">
                                    <ul class="menu-first hidden-sm hidden-xs">
                                        <li class="active"><a href="#">Home</a></li>
                                        <li><a href="#services">O Fotógrafo</a></li>
                                        <li><a href="#portfolio">Portfolio</a></li>
                                        <li><a href="#our-team">Últimos Eventos</a></li>
                                        <li><a href="#contact">Contato</a></li>
                                        <li><a href="#contact1">Área do Cliente</a></li>
                                    </ul>
                                    <a href="#" class="toggle-menu visible-sm visible-xs"><i class="fa fa-bars"></i></a>
                                </div> <!-- /.main-menu -->
                            </div> <!-- /.row -->
                        </div> <!-- /#menu-wrapper -->
                        <div class="menu-responsive hidden-md hidden-lg">
                            <ul>
                                <li class="active"><a href="#">Home</a></li>
                                <li><a href="#services">O Fotógrafo</a></li>
                                <li><a href="#portfolio">Portfolio</a></li>
                                <li><a href="#our-team">Últimos Eventos</a></li>
                                <li><a href="#contact">Contato</a></li>
                                <li><a href="#contact1">Área do Cliente</a></li>
                            </ul>
                        </div> <!-- /.menu-responsive -->
                    </div> <!-- /.container -->
                </div> <!-- /.main-header -->
            </div> <!-- /.site-header -->
            <div class="site-slider">
                <div class="slider">
                    <div class="flexslider">
                        <ul class="slides">
                            <li>
                                <div class="overlay"></div>
                                <img src="images/slide1.jpg" alt="">
                                <div class="slider-caption visible-md visible-lg">

                                </div>
                            </li>
                            <li>
                                <div class="overlay"></div>
                                <img src="images/slide2.jpg" alt="">
                                <div class="slider-caption visible-md visible-lg">

                                </div>
                            </li>
                            <li>
                                <div class="overlay"></div>
                                <img src="images/slide3.jpg" alt="">
                                <div class="slider-caption visible-md visible-lg">

                                </div>
                            </li>
                            <li>
                                <div class="overlay"></div>
                                <img src="images/slide4.jpg" alt="">
                                <div class="slider-caption visible-md visible-lg">

                                </div>
                            </li>
                            <li>
                                <div class="overlay"></div>
                                <img src="images/slide5.jpg" alt="">
                                <div class="slider-caption visible-md visible-lg">

                                </div>
                            </li>
                            <li>
                                <div class="overlay"></div>
                                <img src="images/slide6.jpg" alt="">
                                <div class="slider-caption visible-md visible-lg">

                                </div>
                            </li>
                            <li>
                                <div class="overlay"></div>
                                <img src="images/slide7.jpg" alt="">
                                <div class="slider-caption visible-md visible-lg">

                                </div>
                            </li>
                        </ul>
                    </div> 
                </div> <!-- /.slider -->
            </div> <!-- /.site-slider -->
        </div> <!-- /.site-main -->


        <div class="content-section" id="services">
            <div class="container">
                <div class="row">
                    <div class="heading-section col-md-12 text-center">
                        <h2>O Fotógrafo</h2>

                    </div> <!-- /.heading-section -->
                </div> <!-- /.row -->
               <div class="row">
                    <div class="team-member col-md-3 col-sm-6">
                        <div class="member-thumb">
                            <img src="images/boi.jpg" alt="">
                            <div class="team-overlay">
                                <h3>Eduardo Gonçalves</h3>
                                <ul class="social">
                                    <li><a href="https://www.facebook.com/estudiodeimagemfotografia?fref=hovercard" class="fa fa-facebook" target="_blank"></a></li>

                                </ul>
                            </div> <!-- /.team-overlay -->
                        </div> <!-- /.member-thumb -->
                         <p class="text-center"><br>Com 33 anos de idade, 5 de fotografia e muitos casamentos em seu portfólio. Eduardo Gonçalves vem ganhando grande destaque entre os melhores fotógrafos do interior paulista.
Seu objetivo é captar o momento do jeito que ele aconteceu sem interferir em nada, conseguindo fazer uma mesclagem com a fotografia clássica e a criativa conseguindo atingir todos os públicos e emocionando várias gerações. Nosso propósito é ter uma fotografia de grande qualidade e menos careta.
            </p>
                    </div> <!-- /.team-member -->    


                    <div class="team-member col-md-3 col-sm-6">
                        <div class="member-thumb">
                            <img src="images/vah.jpg" alt="">
                            <div class="team-overlay">
                                <h3>Valéria Gonçalves</h3>
                                <ul class="social">
                                    <li><a href="https://www.facebook.com/goncalvesvah?fref=hovercard" class="fa fa-facebook" target="_blank"></a></li>

                                </ul>

                            </div> <!-- /.team-overlay -->
                        </div> <!-- /.member-thumb -->
              <p class="text-center"><br>A paixão pela fotografia foi despertada dentro de mim quando meu marido e sócio Eduardo Gonçalves me deu a primeira câmera e pediu para eu fazer uma foto. Naquele momento vimos que eu tinha um olhar diferenciado, conseguia ver o que os outros não viam em uma simples cena. E a partir daí fui me aperfeiçoando, e hoje trabalho com o que mais gosto, o amor. Meu maior prazer é fotografar o amor e deixar ele para sempre eternizado pelas minhas lentes.
            </p>

                    </div> <!-- /.team-member -->  
                 </div>

              </div> <!-- /.container -->
        </div> <!-- /#services -->



        <div class="content-section" id="portfolio">
            <div class="container">
                <div class="row">
                    <div class="heading-section col-md-12 text-center">
                        <h2>Portfolio</h2>

                    </div> <!-- /.heading-section -->
                </div> <!-- /.row -->
             <?php   
               require("classe/conexao.class.php");
                $c = new Conexao();
                $c->Conecta();
                $c->SelecionaBase();

                $portfolio = "portfolio";
                $sql = mysql_query("SELECT * FROM portfolio where execao = '$portfolio' order by id_portfolio desc LIMIT 12") or die (mysql_error());
                while($a = mysql_fetch_assoc($sql)){
                    $titulo = $a['nome'];
                        $categoria = $a['categoria'];
                        $imagem = $a['img'];
                        $id = $a['id_portfolio'];
                        $_SESSION['id'] = $id;
                print"      

                    <div class=\"portfolio-item col-md-3 col-sm-6\">
                        <div class=\"portfolio-thumb\">
                            <img src=\"portfolio/$imagem\" alt=\"\">
                            <div class=\"portfolio-overlay\">
                                <h3>$categoria $titulo</h3>
                                <a href=\"port.php?por=$titulo\" class=\"expand\">
                                    <i class=\"fa fa-camera\"></i>
                                </a>
                            </div> <!-- /.portfolio-overlay -->
                        </div> <!-- /.portfolio-thumb -->
                    </div> <!-- /.portfolio-item -->


         ";
                }

                mysql_close();
        ?>

</div>
</div>




        <div class="content-section" id="our-team">
            <div class="container">
                <div class="row">
                    <div class="heading-section col-md-12 text-center">
                        <h2>Últimos Eventos</h2>

                    </div> <!-- /.heading-section -->
                </div> <!-- /.row -->
          <?php
                $c->Conecta();
                $c->SelecionaBase();

                $ex="ultimos";
                $sqq = mysql_query("SELECT * FROM ultimos_eventos WHERE execao='$ex' order by id desc LIMIT 12");
                while($b = mysql_fetch_assoc($sqq)){
                    $nome = $b['nome_fotos'];
                        $imagem = $b['img'];
                        $categoria = $b['categoria'];
                        $id = $b['id'];
                        $_SESSION['id'] = $id;

                print"      

                    <div class=\"portfolio-item col-md-3 col-sm-6\">
                        <div class=\"portfolio-thumb\">
                            <img src=\"ultimos/$imagem\" alt=\"$nome\">
                            <div class=\"portfolio-overlay\">
                                <h3>$categoria $nome</h3>
                                <a href=\"foto.php?ti=$nome\" class=\"expand\">
                                    <i class=\"fa fa-camera\"></i>
                                </a>
                            </div> <!-- /.portfolio-overlay -->
                        </div> <!-- /.portfolio-thumb -->
                    </div> <!-- /.portfolio-item -->

";
}

mysql_close();
?>
</div>
</div>

</div>

<div class="col-md-12">
<p align="center"><a href="eventos-final.php"><input type="submit" class="mainBtn text-center" value="Ver Mais"></a></p>
</div>

        <div class="content-section1" id="contact">
            <div class="container">
                <div class="row">
                    <div class="heading-section col-md-12 text-center">
                        <h2>Contato</h2>

                    </div> <!-- /.heading-section -->
                </div> <!-- /.row -->
               <div class="row">
                    <div class="col-md-7 col-sm-8">
                        <p align="center">Envie um e-mail para nós e consulte a disponibilidade e os valores para o seu evento preenchendo o formulário ao lado. Quanto mais detalhes você informar, melhor e mais rápido poderemos responder. Obrigado pela compreensão Atenciosamente Equipe Estudio de Imagem.
                        </p>
                        <ul class="contact-info">
                            <li><i class="fa fa-phone"> (16) 3382-9698</i></li>
                            <li><i class="fa fa-phone"> (16) 99749-8592</i></li>
                            <li><i class="fa fa-envelope"> [email protected]</i></li><br>
                            <li><i class="fa fa-map-marker">  Matão-SP Rua Maranhão,10<br><a href="https://www.google.com/maps?q=Rua+Maranhão,+10,+Matão+-+SP&t=m&z=19" target="_blank"> Ver Mapa Completo </i></a></li>
                        </ul>
                        <!-- spacing for mobile viewing --><br><br>
                    </div> <!-- /.col-md-7 -->
                    <div class="col-md-5 col-sm-8">
                        <div class="contact-form">
                            <form method="post" name="contactform" id="contactform" action="email.php">
                                <p>
                                    <input name="name" type="text" id="name" placeholder="Nome Completo">
                                </p>
                                <p>
                                    <input name="email" type="text" id="email" placeholder="Informe seu E-mail para entrarmos em Contato"> 
                                </p>
                                <p>
                                    <input name="subject" type="text" id="subject" placeholder="Assunto"> 
                                </p>
                                <p>
                                    <textarea name="comments" id="comments" placeholder="Mensagem"></textarea>    
                                </p>
                                <input type="submit" class="mainBtn" id="submit" value="Enviar Mensagem">
                            </form>
                        </div> <!-- /.contact-form -->
                    </div> <!-- /.col-md-5 -->
                </div> <!-- /.row -->
            </div> <!-- /.container -->
        </div> <!-- /#contact -->


        <div class="content-section2 col-md-12" id="contact1">
            <div class="container">
                <div class="row">
                    <div class="heading-section col-md-12 text-center">
                        <h2>Área do Cliente</h2>

                    </div> <!-- /.heading-section -->
                </div> <!-- /.row -->    
            <div class="row">
                <div class="col-md-12 col-xs-11 text-center">
                <form method="post" action="logar.php" id="contactform" name="contactform">
                   <input type="email" name="email" placeholder="E-mail">
                   <input type="password" name="senha" placeholder="Senha">
                   <input type="submit" class="main-btn" id="submit" value="Logar">
                </form>
              </div>
             </div>
           </div>
          </div>

        <div id="footer">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-xs-12 text-left">
                        Copyright © 2015 Eduardo Gonçalves Fotografia | Design: Leonardo Costa
                    </div> <!-- /.text-center -->

                </div> <!-- /.row -->
            </div> <!-- /.container -->
        </div> <!-- /#footer -->

        <script src="js/vendor/jquery-1.11.0.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
        <script src="js/bootstrap.js"></script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

and here is the code in jquery:

jQuery(document).ready(function($) {

    'use strict';


    /************** Toggle *********************/
    // Cache selectors
    var lastId,
        topMenu = $(".menu-first, .menu-responsive"),
        topMenuHeight = topMenu.outerHeight()+15,
        // All list items
        menuItems = topMenu.find("a"),
        // Anchors corresponding to menu items
        scrollItems = menuItems.map(function(){
          var item = $($(this).attr("href"));
          if (item.length) { return item; }
        });

    // Bind click handler to menu items
    // so we can get a fancy scroll animation
    menuItems.click(function(e){
      var href = $(this).attr("href"),
          offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
      $('html, body').stop().animate({ 
          scrollTop: offsetTop
      }, 450);
      e.preventDefault();
    });

    // Bind to scroll
    $(window).scroll(function(){
       // Get container scroll position
       var fromTop = $(this).scrollTop()+topMenuHeight;

       // Get id of current scroll item
       var cur = scrollItems.map(function(){
         if ($(this).offset().top < fromTop)
           return this;
       });
       // Get the id of the current element
       cur = cur[cur.length-1];
       var id = cur && cur.length ? cur[0].id : "";

       if (lastId !== id) {
           lastId = id;
           // Set/remove active class
           menuItems
             .parent().removeClass("active")
             .end().filter("[href=#"+id+"]").parent().addClass("active");
       }                   
    });



    $(window).scroll(function(){
         $('.main-header').toggleClass('scrolled', $(this).scrollTop() > 1);
     });



    $('a[href="#top"]').click(function(){
        $('html, body').animate({scrollTop: 0}, 'slow');
        return false;
    });


    $('.flexslider').flexslider({
      slideshow: true,
      slideshowSpeed: 6000,  
      animation: "fade",
      directionNav: false,
    });


    $('.toggle-menu').click(function(){
        $('.menu-responsive').slideToggle();
        return false;
    });


    /************** LightBox *********************/
      $(function(){
        $('[data-rel="lightbox"]').lightbox();
      });


});

stretch content-section:

.content-section {
  margin-top: 80px;
  padding-top: 60px;
  margin-left:-10px;
}

active snippet that marks colors:

.main-menu ul li.active a {
 border-top: 3px solid #757f8c;
  color: #757f8c;
}

Here are the images:

javascript jquery css
  • 4

    Sorry for the answer, but this is a developer community, so we need code if you need specific help. Try simulating the problem in https://jsfiddle.net/ so we can see the problem.

  • 1

    Good night Leandro, it is very difficult to deduce what can be, is highly it is recommended that you read the following links so that you do not experience difficulties in transmitting future problems to new questions: http://answall.com/help/mcve and http://answall.com/help/how-to-ask

  • vo post the html code and the page that does this

  • posted the codes along with the images

1 answer

0

Check the classes of divs of each content are correct, it seems to me that the last two divs are different from the others.

<div class="content-section" id="services">
...
<div class="content-section" id="portfolio">
...
<div class="content-section" id="our-team">
...
<div class="content-section1" id="contact">
...
<div class="content-section2 col-md-12" id="contact1">
...

Try to follow the template pattern, most likely this is the source of the problem.

UPDATE 1: Try this on the last two

<div class="content-section" id="contact">
...
<div class="content-section" id="logar">
...

Make sure the ids are not referenced in the CSS. If so, include them.

  • I already checked that friend and this correct I do not understand why it gives the effect of the animation descending to where I clicked it just does not give the Hover in the last 2

  • after I did that Dit you said he went down a hover contact but he does not in the client’s area seems by what I am seeing he is not giving the hover in this why it does not occupy the entire screen

  • in this case it is necessary to see the operation of the class content-Section to find out the reason for the latter divnot have entered the rule. I would guess that is the id, you can repeat id="contact" in the latter div to observe the behavior. If so, simply include it in the CSS.

  • type so I’m testing here already tested what you said I decided to increase the height of divof the client area for that I made an equal class and changed the name the only difference in her and the height put 700px there updated page and she went down and gave the hover I could just sort of arrange it for her hover regardless of size?

  • I repeat again, the hover should be in your CSS file. There is no way to answer your question without first seeing the class behavior content-Section

  • vo put here the excerpt from content-Section

  • ready I edited the question

  • none hover?

  • the hover it provides javascript but not hover guy and active for when I click it get marked as active. I’ll edit the question

  • ready-made already edited

Show 5 more comments

Browser other questions tagged javascript jquery css

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