悬停时光标变化

时间:2014-12-22 06:23:56

标签: css ruby-on-rails

当鼠标光标悬停在表格上时,我试图在悬停时更改光标。这里的视图是用ruby-rails编写的。我试过简单地添加

.custom > table:hover·
{
    cursor: wait;
}

将上述内容添加到custom.css.scss

然后我将以下代码添加到我的视图中

<table class="nav nav-tabs custom">

这似乎不起作用。 我知道css代码必须在某个块内但我不确定它的确切方式,特别是在ruby on rails上。有什么方法可以纠正我做错的事情吗?

编辑:

感谢您的建议。

我试过这个

table.custom:hover{
    cursor:wait;
}

虽然这在表头中起作用,但它不适用于表中数据呈现的部分:

  <table style="display:none" class="nav nav-tabs custom">
      <%= render ClassName.new, :index => 'N_TYPE' %>
  </table>

渲染列与此类似

<td><%= label_tag :p_type, p_type.p_type %></td>

3 个答案:

答案 0 :(得分:2)

在您的风格中,您已经使用了儿童组合器&#34;&gt;&#34;。子组合子用于将CSS应用于所选元素的子元素。 例如。
HTML:

 <ul>
   <li>First</li>
   <li>Second</li>
 </ul>

CSS:

ul > li {
 width: 100px;
}

将适用于&#34; li&#34;因为他们都是&#34; ul&#34;的孩子。

在您的情况下,您需要在直接元素上应用css。为此,您不需要使用儿童组合器。

你也在制作CSS Pseudo类。这个类可以直接应用于元素。 例如。  #mycustomid:悬停
.mycustomclass:悬停
的ElementName:悬停

检查附加的jsfiddle代码。

http://jsfiddle.net/zgjx7ymr/

答案 1 :(得分:2)

.custom > table:hover·
{
    cursor: wait;
}

CSS的作用是在类 .custom 的选择器中查找子。所以它不适合你的HTML。

正确的方法是

table.custom:hover{
    cursor:wait;
}

查找类名为 .custom 的表并应用CSS

Fiddle

答案 2 :(得分:1)

班级table下没有子custom元素。试试这样。

table.custom:hover
{
 cursor:wait;  
}