Jump to content

Issue on hover


harry_ord

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;
}

 

Link to comment
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>

Link to comment
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.

Link to comment
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;
}

 

Link to comment
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
×
×
  • Create New...