堆栈内存溢出
  简体   繁体   English

将鼠标悬停在元素上时，光标不变

[英]Cursor is Not Changing When Hovering Over an Element

 原文  2017-10-16 17:29:50  5   3    html/ css/ cursor

问题描述

I am working on some code, and it looks fine, but the cursor is not updating to a pointer when it hover s over the element . 我正在编写一些代码，看起来不错，但是当hover在element时， cursor没有更新为pointer 。 Here's my code: 这是我的代码： 

 .searchProgramsResultTab { font-family: 'Roboto', sans-serif; background-color: #DADBDB; height: 100px; line-height: 100px; padding-left: 10px; margin-top: -1px; font-size: 28px; color: #2BC2D3; font-weight: 500; display: inline-block; border: 3px groove #686868; } .searchProgramsAdditional1 { font-family: 'Roboto', sans-serif; height: 100px; padding-left: 300px; line-height: 100px; font-size: 28px; color: #47BC47; font-weight: 500; position: fixed; } .searchProgramsBar { font-family: 'Roboto', sans-serif; height: 100px; padding-left: 500px; line-height: 100px; font-size: 38px; color: #0F0F0F; font-weight: 500; position: fixed; } .searchProgramsAdditional2 { font-family: 'Roboto', sans-serif; height: 100px; padding-left: 550px; line-height: 100px; font-size: 28px; color: #D41B1B; font-weight: 500; position: fixed; } .lastVisited { font-family: 'Roboto', sans-serif; height: 100px; padding-left: 950px; line-height: 100px; font-size: 28px; color: #707070; font-weight: 500; position: fixed; } .lastVisitedTime { font-family: 'Roboto', sans-serif; height: 100px; padding-left: 1105px; line-height: 100px; font-size: 28px; color: #D41B1B; font-weight: 500; position: fixed; cursor: default; } .hoverText:hover { cursor: pointer; } 
 <div class = "searchProgramsResultTab" id = "searchProgramsResult1"> <span class = "programName hoverText" id = "programName1">Name - Bob</span> <span class = "searchProgramsAdditional1 hoverText" id = "searchProgramsAdditional11">Save for later</span> <span class = "searchProgramsBar"> - </span> <span class = "searchProgramsAdditional2 hoverText" id = "searchProgramsAdditional12">Report a bug</span> <span class = "lastVisited">Last visited: </span><span class = "lastVisitedTime">Never</span> </div>

Don't worry about the bad formatting, I just want to see why it is not changing the cursor . 不用担心格式错误，我只想看看为什么它没有改变cursor 。

3 个解决方案

解决方案1
 0  2017-10-16 17:47:41

The hoverText class should be applied to the div element instead of the first span element for "Name - Bob". 应该将hoverText类应用于div元素，而不是“名称-Bob”的第一个span元素。

I've copied your code with this change below. 我已通过以下更改复制了您的代码。 

 .searchProgramsResultTab { font-family: 'Roboto', sans-serif; background-color: #DADBDB; height: 100px; line-height: 100px; padding-left: 10px; margin-top: -1px; font-size: 28px; color: #2BC2D3; font-weight: 500; display: inline-block; border: 3px groove #686868; } .searchProgramsAdditional1 { font-family: 'Roboto', sans-serif; height: 100px; padding-left: 300px; line-height: 100px; font-size: 28px; color: #47BC47; font-weight: 500; position: fixed; } .searchProgramsBar { font-family: 'Roboto', sans-serif; height: 100px; padding-left: 500px; line-height: 100px; font-size: 38px; color: #0F0F0F; font-weight: 500; position: fixed; } .searchProgramsAdditional2 { font-family: 'Roboto', sans-serif; height: 100px; padding-left: 550px; line-height: 100px; font-size: 28px; color: #D41B1B; font-weight: 500; position: fixed; } .lastVisited { font-family: 'Roboto', sans-serif; height: 100px; padding-left: 950px; line-height: 100px; font-size: 28px; color: #707070; font-weight: 500; position: fixed; } .lastVisitedTime { font-family: 'Roboto', sans-serif; height: 100px; padding-left: 1105px; line-height: 100px; font-size: 28px; color: #D41B1B; font-weight: 500; position: fixed; cursor: default; } .hoverText:hover { cursor: pointer; } 
 <div class = "searchProgramsResultTab hoverText" id= "searchProgramsResult1"> <span class = "programName" id = "programName1">Name - Bob</span> <span class = "searchProgramsAdditional1 hoverText" id = "searchProgramsAdditional11">Save for later</span> <span class = "searchProgramsBar"> - </span> <span class = "searchProgramsAdditional2 hoverText" id = "searchProgramsAdditional12">Report a bug</span> <span class = "lastVisited">Last visited: </span><span class = "lastVisitedTime">Never</span> </div>

解决方案2
 0 已采纳  2017-10-16 17:50:32

You are using Position:fixed; 您正在使用Position：fixed; for these elements. 对于这些元素。 and giving them some padding. 并给他们一些填充物。 

.searchProgramsAdditional1 {
  font-family: 'Roboto', sans-serif;
  height: 100px;

  line-height: 100px;
  font-size: 28px;
  color: #47BC47;
  font-weight: 500;
  position: fixed;
}
.searchProgramsBar {
  font-family: 'Roboto', sans-serif;
  height: 100px;

  line-height: 100px;
  font-size: 38px;
  color: #0F0F0F;
  font-weight: 500;
  position: fixed;
}
.searchProgramsAdditional2 {
  font-family: 'Roboto', sans-serif;
  height: 100px;

  line-height: 100px;
  font-size: 28px;
  color: #D41B1B;
  font-weight: 500;
  position: fixed;
}

This is your last element 这是你的最后一个要素 

.lastVisited {
  font-family: 'Roboto', sans-serif;
  height: 100px;

  line-height: 100px;
  font-size: 28px;
  color: #707070;
  font-weight: 500;
  position: fixed;
}

This last element is overlapping on the other Elements 最后一个元素与其他元素重叠

I have removed all the padding and put 我删除了所有填充并放了
breaklines to check the problem and cursor works Fiddle here 中断线以检查问题，并且光标在此处显示提琴

解决方案3
 0  2017-10-16 17:50:39

Use a wrapper to hold your fixed elements. 使用包装器固定您的固定元素。

Also some minor improvement in structure, see it yourself. 结构上也有一些小改进，请自行查看。

(fixed/absolute elements are tricky, read about the documentation before using them) （固定/绝对元素比较棘手，使用它们之前请先阅读文档）

your hover (pointer) is not working because of stacking, set z-index to 1 for those elements and you will see it is working. 您的悬停（指针）由于堆叠而无法工作，请将这些元素的z-index设置为1，您会看到它正在工作。 

 .searchProgramsResultTab { font-family: 'Roboto', sans-serif; background-color: #DADBDB; height: 100px; line-height: 100px; padding-left: 10px; margin-top: -1px; font-size: 28px; color: #2BC2D3; font-weight: 500; display: inline-block; border: 3px groove #686868; } .searchProgramsAdditional1 { font-family: 'Roboto', sans-serif; height: 100px; line-height: 100px; font-size: 28px; color: #47BC47; font-weight: 500; } .searchProgramsBar { font-family: 'Roboto', sans-serif; height: 100px; line-height: 100px; font-size: 38px; color: #0F0F0F; font-weight: 500; } .searchProgramsAdditional2 { font-family: 'Roboto', sans-serif; height: 100px; line-height: 100px; font-size: 28px; color: #D41B1B; font-weight: 500; } .lastVisited { font-family: 'Roboto', sans-serif; height: 100px; line-height: 100px; font-size: 28px; color: #707070; font-weight: 500; } .lastVisitedTime { font-family: 'Roboto', sans-serif; height: 100px; line-height: 100px; font-size: 28px; color: #D41B1B; font-weight: 500; cursor: default; } .hoverText { display: inline-block; } .hoverText:hover { background: lightgray; cursor: pointer !important; } .wrapper { width: 100%; text-align: center; position: fixed; } .lastVisitedWrapper { margin-left: 50px; } 
 <div class="searchProgramsResultTab" id="searchProgramsResult1"> <span class="programName hoverText" id="programName1">Name - Bob</span> </div> <div class="wrapper"> <span class="searchProgramsAdditional1 hoverText" id="searchProgramsAdditional11">Save for later</span> <span class="searchProgramsBar"> - </span> <span class="searchProgramsAdditional2 hoverText" id="searchProgramsAdditional12">Report a bug</span> <span class="lastVisitedWrapper"> <span class="lastVisited">Last visited: </span> <span class="lastVisitedTime">Never</span> </span> </div> <pre> 1 2 3 21 312 3 12 3 123 213 123 123 12 1 2 3 21 312 3 12 3 123 213 123 123 12 1 2 3 21 312 3 12 3 123 213 123 123 12 1 2 3 21 312 3 12 3 123 213 123 123 12 1 2 3 21 312 3 12 3 123 213 123 123 12 1 2 3 21 312 3 12 3 123 213 123 123 12 </pre>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 悬停在元素上时使图像跟随光标 - Make image follow cursor when hovering over an element 悬停文本时更改光标 - Changing cursor when hovering a text 将鼠标悬停在元素B上时更改元素A的背景-mouseleave不起作用 - changing the background of element A when hovering over element B - mouseleave not working 悬停元素时更改背景 - Changing the background when hovering an element 悬停在背景1上时，将光标替换为图像 - Replace cursor with image when hovering over background 1 将鼠标悬停在矩形上时，如何让 cursor 的坐标跟随 cursor？ - How to let the coodinates of the cursor follow the cursor when hovering over a rectangle? 将鼠标悬停在链接上时更改正文背景 - Changing body background when hovering over a link 将鼠标悬停在另一个div上时更改div - Changing divs when hovering over a different div 悬停在图像上时，只显示光标所在的部分 - When hovering over image, only display the part where the cursor is over it 将鼠标悬停在元素上时指定工具提示的位置 - Specify the location of the tooltip when hovering over an element
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM