当用户将鼠标悬停在滑块上时，使光标成为手

Posted 2023-03-05

【中文标题】当用户将鼠标悬停在滑块上时，使光标成为手

【英文标题】：Make the cursor a hand when a user hovers over a slider

【发布时间】：2019-09-29 02:36:57

【问题描述】：

https://ilanwittenberg.com/ 的主页显示全屏滑块。不幸的是，一些 PC 用户无法点击屏幕进入投资组合页面：https://ilanwittenberg.com/portfolio/

只有当鼠标悬停在该页面上的滑块上方时（使用 PC 时），有没有办法将光标从箭头更改为手？

下面的代码不起作用：

.wcp-caption-plugin .image-caption-box 
    cursor: pointer !important;

主页包含以下代码块：

html
overflow:hidden;

body
cursor:pointer !important;

#fullscreen_slider_0
z-index:0;

#wpadminbar
display: none !important;

.content, .container
padding: 0 !important;
min-height: 0 !important;

#top.avia-blank #main .container_wrap:first-child
border: none !important;

#top.avia-blank #wrap_all #main
border: none !important;

我应该对此代码进行更改吗？

预期结果是当鼠标悬停在主页上显示的全屏滑块上方时，鼠标光标将从箭头变为手形。

【问题讨论】：

首页包含如下代码块：html overflow:hidden; body 光标：指针！重要； #fullscreen_slider_0 z-index:0; #wpadminbar 显示：无！重要； .content, .container 填充：0 !important;最小高度：0！重要； #top.avia-blank #main .container_wrap:first-child 边框：无 !important; #top.avia-blank #wrap_all #main 边框：无！重要；

【参考方案1】：

.wcp-caption-plugin .image-caption-box 在该页面上似乎不存在。尝试将该规则添加到.splash-logo

【讨论】：

已将 splash-logo 代码块修改为： ilanwittenberg.com/wp-content/uploads/2019/03/Ilan-Wittenberg- Logo-v5.gif" /> .wcp -caption-plugin .image-caption-box 这是正确的格式吗？

【参考方案2】：

在 CSS 上使用伪类：

.wcp-caption-plugin:hover .image-caption-box:hover 
    cursor: pointer !important;

如果需要，也可以分开类：

.wcp-caption-plugin:hover 
    cursor: pointer !important;


.image-caption-box:hover 
    cursor: pointer !important;

【讨论】：

感谢您的帮助马修斯！主页包含以下代码块： html overflow:hidden; body 光标：指针！重要； #fullscreen_slider_0 z-index:0; #wpadminbar 显示：无！重要； .content, .container 填充：0 !important;最小高度：0！重要； #top.avia-blank #main .container_wrap:first-child 边框：无 !important; #top.avia-blank #wrap_all #main 边框：无！重要； 我应该修改这段代码吗？

不客气！您能接受我的回答作为最佳答案吗？

【参考方案3】：

使用以下 css 代码解决问题：

.splash-logo:hover 
cursor: pointer !important;