代码之家 › 专栏 › 技术社区 › Xeedy

基于悬停按钮的背景更改

wordpress css

-1

Xeedy · 技术社区 · 1 年前

我想根据悬停的按钮更改容器背景。我想为容器中的另外两个或多个按钮做这个。然而,我找不到解决这个问题的办法。谢谢你的帮助

我试过了:

.mkdf-eh-item {
    background-image: url("base_img.jpg");
    background-size: cover;
    width: 100%;
    height: 300px;
}
.mkdf-eh-item { 
    pointer-events: none; 
} 
.mkdf-eh-item:hover { 
    background-image: url("hovered_img.jpg");
} 
.mkdf-eh-item .Button { 
    pointer-events: auto; 
} 
 .mkdf-eh-item .Button:hover { 
    background-color: transparent;
}
.mkdf-eh-item .Button1 { 
    pointer-events: auto; 
} 
.mkdf-eh-item .Button1:hover { 
    background-color: transparent;
}

但这只适用于一个按钮。我想在每个按钮上悬停不同的图像

1 回复 | 直到 1 年前

-1

mahdi rahani 1 年前

要根据悬停的按钮更改容器背景,可以同时使用CSS和JavaScript。这里有一个简单的方法:

document.querySelectorAll('.button').forEach(button => {
    button.addEventListener('mouseenter', function() {
        const newBg = this.getAttribute('data-bg');
        this.closest('.mkdf-eh-item').style.backgroundImage = `url(${newBg})`;
    });

    button.addEventListener('mouseleave', function() {
        this.closest('.mkdf-eh-item').style.backgroundImage = 'url(base_img.jpg)';
    });
});

.mkdf-eh-item {
    background-image: url("base_img.jpg");
    background-size: cover;
    width: 100%;
    height: 300px;
    transition: background-image 0.3s ease;
}

.button {
    pointer-events: auto;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

<div class="mkdf-eh-item">
    <button class="button" data-bg="hovered_img1.jpg">Button 1</button>
    <button class="button" data-bg="hovered_img2.jpg">Button 2</button>
    <button class="button" data-bg="hovered_img3.jpg">Button 3</button>
</div>

推荐文章

Marcin Budzy · Twenty 24 Wordpess主题的子菜单隐藏在图库下方(响应式灯箱和图库)(Wordpress)

1 年前

Cairan Van Rooyen · 为什么我的Grafana iframe不会显示在我的Wordpress网站上?

1 年前

Eiman Maghfouri · woocommerce _可购买的编辑挂钩

1 年前

OÄuz Erdem · chrome浏览器和iOS safari浏览器的页脚行为不同

1 年前

JapeNZ · 通过自定义cron作业函数向WooCommerce产品添加产品标签

1 年前

Mohammed Malleck · 在WooCommerce管理员编辑订单页面中隐藏客户IP地址

1 年前

Javad Hamashbouri · 不显示ajax警报

1 年前

Eduardo Relax · 如何获取WooCommerce产品类别url以在HTML元标记中显示?

1 年前

Stamp · 自定义字段未显示在WordPress REST API响应中

1 年前

pawan19 · WordPress的Nginx设置:面临301重定向问题

1 年前