Botón con .css no me funciona bien enIE

[ceaped]

Buenas tardes

Así te tengo mi botón:

Código CSS:

.item_menu_interior_btn_1{
    background-color: #C5D163;
    width: 70px;
    height: 70px;
    position: absolute;
    opacity: 100;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -o-border-radius: 100px;
    border-radius: 100px;
    }
 
.item_menu_interior_btn_1 img{
    border: 0;
    margin: 10px;
    }
 
.item_menu_interior_btn_1 a{
    text-decoration: none;
    }
 
.item_menu_interior_btn_1:hover {
    background-color: #D5DE8D;
    }
 

Código CSS:

.titulo_menu_interior_btn_1{
    font-family: Arial;
    color: #000;
    background-color: #C5D163;
    width: 225px;
    margin-top:-85px;
    margin-left: 80px;
    position: relative;
    z-index: 1;
    opacity: 0;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
    text-align: center;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -o-border-radius: 100px;
    border-radius: 100px;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
    }
 

Pero cuando hago hover sobre el botón se me queda activado ".titulo_menu_interior_btn_1", o sea que el título que se ve cuando paso el puntero sobre el botón es zona activa del botón.

¿Cómo hago para que esa área no se active?

Gracias por su ayuda

[pzin]

Al menos a mi me hace falta algo más de explicación. No termino de saber ni entender qué es el botón, título ni el problema en si. También soy muy cabezón, igual es eso.

[ceaped]

Hola pzin
Tengo un botón asi:

Código HTML:

<div class="item_btn_1">
    <a class="titulo_btn_1" href="#">
    Texto...
    </a></div>
 

Este el el .css para el botón:

Código CSS:

.item_btn_1{
    background-color: #C5D163;
    background-image: url(../images/unidad_1.png);
    background-repeat: no-repeat;
    background-position: center center;
    width: 80px;
    height: 80px;
    position: absolute;
    opacity: 100;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -o-border-radius: 100px;
    border-radius: 100px;
    }
 
.item_btn_1 a{
    position: absolute;
    text-decoration: none;
    }
 
.item_btn_1:hover {
    background-color: #D5DE8D;
    }
 

Y este el .css para cuando paso el mouse por encima del botón:

Código CSS:

.titulo_btn_1{
    font-family: Arial;
    color: #000;
    background-color: #C5D163;
    width: 225px;
    margin-top:-50px;
    margin-left: -70px;
    position: absolute;
    z-index: -9999;
    opacity: 0;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
    text-align: center;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -o-border-radius: 100px;
    border-radius: 100px;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
    float: left;
    }
 

En Chrome, Safari y Firefox funciona bien, pero en IE no.
Cuando paso el mouse por encima del botón en IE también se comporta como botón el toolTip que se abre, queda como zona activa.

¿Cómo hago para que no quede activo el toolTip (cuando paso el mosue por encima del botón) en IE?

Gracias por tu ayuda

[ceaped]

Que lio esto…le doy vueltas y nada que me funciona...

[pzin]

No se entiende lo que quieres o el problema. Tampoco ejecutando el código acabo de entender el problema.

Pon un fiddle con el código necesario para reproducir bien el problema y lo enlazas para verlo bien.

[ceaped]

Hola pzin
Te puedo pasar un ejemplo algún correo.

Gracias por tu ayuda

[pzin]

No tengo correo ni WhatsApp.

No en serio, súbelo a algún sitio como jsfiddle.

[ceaped]

Hola pzin
Mira acá un ejemplo:

http://jsfiddle.net/6RZqF/2/

Cuando pasas el mouse por encina del botón sale un texto (tooltip), este texto si también te paras sobre el también es zona activa del botón. Lo que no quiero es que este texto (tooltip) sea zona activa del botón sino que aparezaca y se oculte cuando este sobre y fuera del botón.

Gracias por tu ayuda