Jump to content
harry_ord

Issue on hover

Recommended Posts

Hello

This is my website:

http://cvkj.agencialosnavegantes.cl/

In the second section ("Nuestros Servicios") i have 3 big buttons that change their backgrounds to purple on hover.

The problem i have is why do these buttons appear repeated below, like below every button i have an empty button repeated. Why is this happening?

HTML for the buttons

<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center">
				<a class="et_pb_button boton-contacto et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="#"><img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-5.png" style="width:30%;"><p>Asesoría y Servicios Contable</p>
</a></div>

Here is the CSS related:

 

.et_pb_button_0.et_pb_button.et_pb_module {
    width: 290px;
    border-radius: 50px 50px 50px 50px;
    padding: 50px ! important;
    margin: 1%;
}

.et_pb_button_0 {
    color: #08a121!important;
    background-color: #fff;
    border-width: 1px !important;
    border-color: #fff;
    letter-spacing: 0px;
    font-size: 21px;
    font-weight: bold !important;
}

.et_pb_bg_layout_light.et_pb_button_0:hover {
    color: #fff; 
    background: #574586;
}

.et_pb_bg_layout_light.et_pb_button_0:hover p {
    color: #fff;
}

 

Share this post


Link to post
Share on other sites

Viewing the the source, you have a misplaced closing paragraph after the image, that does not have an opening relative paragraph tag before it, so the browser does its best to interpret what is required.

Share this post


Link to post
Share on other sites

What are you talking about? i have the a paragrapah with its 2 tags just after the image:

<a class="et_pb_button boton-contacto et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="#"><img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-5.png" style="width:30%;"><p>Asesoría y Servicios Contable</p>
</a>

Share this post


Link to post
Share on other sites

When I look at source I see

        <div class=" et_pb_row et_pb_row_2">
            <div class="et_pb_column et_pb_column_1_3  et_pb_column_3">
                <div class="et_pb_text et_pb_module et_pb_bg_layout_light et_pb_text_align_left  et_pb_text_6">
                    <div class="et_pb_text_inner">
                        <div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center">
                            <a class="et_pb_button boton-contacto et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="#">
                                <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-5.png" style="width:30%;">
                                </p>xxxx
                                <p>Asesoría y Servicios Contable</p>
                                <p>xxxx</a>
                        </div>

                    </div>
                </div> <!-- .et_pb_text -->
            </div> <!-- .et_pb_column -->

            <div class="et_pb_column et_pb_column_1_3  et_pb_column_4">
                <div class="et_pb_text et_pb_module et_pb_bg_layout_light et_pb_text_align_left  et_pb_text_7">
                    <div class="et_pb_text_inner">
                        <div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center">
                            <a class="et_pb_button boton-contacto et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="#">
                                <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-6.png" class="imagen-servicios">

                              </p>xxxxx
                                <p>Remuneraciones</p>
                                <p>xxxxxx
                            </a>
                        </div>
                    </div>
                </div> <!-- .et_pb_text -->
            </div> <!-- .et_pb_column -->

            <div class="et_pb_column et_pb_column_1_3  et_pb_column_5">
                <div class="et_pb_text et_pb_module et_pb_bg_layout_light et_pb_text_align_left  et_pb_text_8">
                    <div class="et_pb_text_inner">
                        <div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center">
                            <a class="et_pb_button boton-contacto et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="#">
                                <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-7.png" class="imagen-servicios">         
                              </p>xxxxxx
                                <p>Tributable</p>
                                <p>xxxxxx
                            </a></div>

                    </div>
                </div> <!-- .et_pb_text -->
            </div> <!-- .et_pb_column -->
        </div> <!-- .et_pb_row -->

Notice where i have marked with 'xxxxx', you have closing paragraphs tags without opening paragraph before it, and opening paragraph tags without a closing tag within the same parent anchor element.

Share this post


Link to post
Share on other sites

Ok, i think that happens when you just copy code from someone else. I gave up fixing that and i made it all over myself:

 

<a href="#">
		
		<img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-5.png" style="width:30%;">	<p style="font-size: 21px; font-weight: bold !important;">Asesoría y Servicios Contable</p>
	</a>

And the CSS:

 

.cuadrado-icono {
    background-color: #fff;
}

.cuadrado-icono p {
    color: #08a121;
}

.cuadrado-icono:hover{
    background-color: #453669;
    color: #fff;
}

.cuadrado-icono:hover p{
    color: #fff;
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×