Question

我试着将鼠标悬停在tbody和td上。它工作得很好，但它没有用。我使用内联样式（js模式）而不是CSS代码并使用Radium。

这是我的代码

<tr key={id} style={styles.row} onClick={click}>
    <td style={stylestd}>
        <span style={styles.data}>asdc</span>
    </td>
</tr>

这是我的风格。

row: {
    display: 'table-row',
    borderBottom: '1px solid #ddd',
    height: '20px',

   ':hover': {
        cursor: 'pointer',
        backgroundColor: 'red',
    },
},

谢谢。

Answer 1

您使用内联样式style={styles.row}并在其中使用:hover将无效。您需要明确定义css中的:hover规则。

有关详细信息，请参阅此post。

：hover是一个伪选择器，对于CSS，只在样式表中有意义。没有任何内联样式的等价物（因为它没有定义选择标准）。

或者，您可以使用onMouseOver并绑定样式。

<tr key={id} style={styles.row} onClick={click} onMouseOver={hoverrule}>

还有库Styled-components，使用它可以让你用悬停规则嵌套css。

请参阅从here提取的此示例：

import React from 'react';
import styled from 'styled-components';

const Div = styled.div`
  margin: 40px;
  border: 5px outset pink;
  &:hover {
   background-color: yellow;
 }
`;

const Paragraph = styled.p`
  font-size: 15px;
  text-align: center;
`;

const OutsetBox = () => (
  <Div>
    <Paragraph>Get started with styled-components </Paragraph>
  </Div>
);

export default OutsetBox;

我不是用tr给出一个例子，因为我不认为你真的需要这个库来使用悬停样式。如果你认为利用这个库会更好，那么我希望你能用这个解决方案锻炼。

Answer 2

我已经发布了答案，我认为这有助于您解决问题。单独编写悬停效果的css代码。

＆＃13;

tr:hover{
  cursor: pointer;
  background-color:red;
}

＆＃13;

 <table>
   <tr key={id} style="border 1px solid;" onClick={click}>
         <td>
            <span >asdc</span>
         </td>
  </tr>
  </table>

＆＃13;

Answer 3

更新的代码使用它将起作用的代码：

public class Example {
    public static void main(String[] args) throws CloneNotSupportedException {
        Tool t= new Tool();
        System.out.println(t.hashCode());

        Tool t1=(Tool) t.clone();
        System.out.println(t1.hashCode());
    }

}

abstract class Item{

    private boolean stackable;
    protected String name;

    public Item()
    {
        this.name      = new String( "Air" );
        this.stackable = true;
    }
    public Item( String name )
    {
        this.name      = name;
        this.stackable = true;
    }
}




class Tool extends Item implements Cloneable {

    protected double durability;

    public Tool()
    {
        super();
        this.durability    = 0;
    }
    public Tool(Tool src)
    {
        this.durability    = src.durability;
    }

    public Item clone() throws CloneNotSupportedException {

        Object obj = super.clone();   //problem is here

        return (Item) obj;
    }
}

你不能使用内联css进行悬停，你必须编写内部或外部css：

<tr key={id} style={styles.row} onClick={click}>
    <td style={stylestd}>
        <span style={styles.data}>asdc</span>
    </td>
</tr>

为什么悬停不工作tr

3 个答案: