Categorias: jQuery

Esconder título na imagem em hover no Divi

Escrito por Amanda de Lavra

9 de fevereiro de 2024
O Divi tem uma coisa muita chata que é aparecer o atributo título das imagens quando passa o mouse em cima delas. Tentei resolver com CSS, mas o código usava a propriedade pointer-events e definia como none. Isso tira não apenas a ação do hover, mas também do click e, nesse caso, as imagens tinham link do Whatsapp, então precisavam ser clicáveis. Achei este tutorial: https://divimundo.com/en/blog/how-to-hide-the-divi-image-title-on-hover-the-easy-way/. Então precisa de um código jQuery no head:
jQuery(document).ready(function($) {
    $("img").mouseenter(function() {
        let $notooltip = $(this).attr("title");
        $(this).attr("notooltip", $notooltip);
        $(this).attr("title", "");
    }).mouseleave(function() {
        let $notooltip = $(this).attr("notooltip");
        $(this).attr("title", $notooltip);
        $(this).removeAttr("notooltip");
    });
});
O código CSS que não dá pra usar é o seguinte:
/* Hide image titles on hover */
img {
	pointer-events:none;
}

Posts relacionados

Botão Leia Mais no Elementor

Botão Leia Mais no Elementor

O site do cliente tinham alguns textos que eram muito extensos e, num layout de coluna, variavam muito de tamanho. Decidi adaptar o que já havia feito no Divi, ao incluir um botão Leia Mais (https://blog.amandadelavra.com.br/modulo-texto-com-botao-leia-mais/), mas...

Cabeçalho diferente ao rolar a página com Divi

Cabeçalho diferente ao rolar a página com Divi

Para o site deste cliente, resolvi fazer dois cabeçalhos diferentes, um maior com várias informações que aparece ao abrir a página, e outro menor e fixo, apenas com o logo e o menu e que aparece ao rolar a página. Achei este tutorial:...

Slider ou Carrossel Randômico

Slider ou Carrossel Randômico

Nesse site, a cliente queria um carrossel de logos randômico. Eram 5 imagens, cada uma com diversos logos. Se eu estivesse usando o módulo Slider do Divi, o plugin Divi Booster tem a opção de randomizar os sliders. Porém, estava usando o módulo Carrossel de Imagens do...