Question

我的圆圈下面有一个图像。

当我将鼠标悬停在圆圈上时，我希望圆圈变大并成为图像的遮罩。我这样做了:(在webkit中工作）

JPanel gridPanel = new JPanel(new GridLayout(gridSize, gridSize));
    Tile[][]tiles=new Tile[(gridSize*gridSize)/2][2];
    boolean[][]tilePlaced=new boolean[(gridSize*gridSize)/2][2];
    JLabel[][] cardsOnGrid = new JLabel[gridSize][gridSize];
    for(int i=0;i<gridSize;i++)
    {
        for(int j=0;j<gridSize;j++)
            cardsOnGrid[i][j]=new JLabel("");
    }
    for(int i=0; i<((gridSize*gridSize)/2);i++)
    {
        tiles[i][0]= new Tile(i, true);
        tiles[i][1]= new Tile(i, true);
        tilePlaced[i][0]=false;
        tilePlaced[i][1]=false;
    }

    for(int i=0; i<gridSize;i++)
    {
        for(int j=0;j<gridSize;j++)
        {
            int tileNum = tileRandom(gridSize);
            int tileNumVer = (int)Math.floor(Math.random()*2);
            while(tilePlaced[tileNum][tileNumVer]==true)
            {
                tileNum = tileRandom(gridSize);
                tileNumVer = (int)Math.floor(Math.random()*2);
            }
            gridPanel.add(tiles[tileNum][tileNumVer]);
            tilePlaced[tileNum][tileNumVer]=true;
        }

.clip {
    position: absolute;
    -webkit-clip-path: circle(40px at center);
    -webkit-transition: -webkit-clip-path 2s; /* Safari */
    transition: -webkit-clip-path 2s;
  }

.clip:hover {
        -webkit-clip-path: circle(75px at center);
        visibility: visible;
    }
}

我现在要做的是以下内容：

我想，一旦我将鼠标悬停在圆圈上，内部的文字就会显示出来，还有其他一些内容（div workshop-container）。我该如何开始？我似乎无法找到如何使这项工作。

Css动画在悬停时可见

0 个答案: