Question

我想更改以下div右下角一角的调整大小图标（请参阅下面的代码片段），我还想在悬停时更改光标（例如e-resize光标）

我试图添加：

LOC    MN_ROLE_COUNT HR_ROLE_COUNT CONT_ROLE_COUNT
------ ------------- ------------- ---------------
Delhi              0             1               1
Mumbai             1             1               0
Noida              0             2               0

但是徒劳无功，我怎么能实现这一点，毕竟是否可能？

        string strDirectoryPath = @"C:\Users\UserDesktopName\Desktop\";
        WebClient User = new WebClient();
        foreach (string strFilePath in Directory.GetFiles(strDirectoryPath))
        {
            string strFileExtension = Path.GetExtension(strFilePath);
            if (strFileExtension == ".pdf")
            {
                Byte[] FileBuffer = User.DownloadData(strFilePath);
                this.Response.ContentType = "application/pdf";
                this.Response.AppendHeader("Content-Disposition;", "attachment;filename=" + FileBuffer);
                this.Response.WriteFile(strFilePath);
                this.Response.End();
            }
        }

public HUDisplay() {

Border border = BorderFactory.createMatteBorder(0, 1, 0, 0, new Color(128, 128, 128));
Border margin = new EmptyBorder(8,8,8,8);
setBorder(new CompoundBorder(border, margin));
setBackground(new Color(250,250,250));

setLayout(new BoxLayout(this, BoxLayout.Y_AXIS));


hudHeader = new JLabel("<html><b>Simulation informations</b><br />" +
        "<i style=\"font-size: 8px;\">Running for " + "0" + "s</i>" + "</html>");

hSeparation = new JSeparator(SwingConstants.HORIZONTAL);

add(hudHeader);
add(hSeparation);

setVisible(true);

}

Answer 1

考虑在单独嵌套的元素中使用图标元素在伪元素的帮助下，您将能够实现预期的行为，如下面的代码片段所示。

代码段示范：

#resizableDiv {
  overflow:auto;
  border:1px;
  height:100px;
  width:200px;
  resize:horizontal;
  display:inline-block;
  background-color:yellow;
  position: relative; /* required */
}

/* Additional */

div#resizableDiv:after {
    content: "";
    resize: horizontal;
    bottom: 0;
    right: 0;
    cursor: e-resize;
    position: absolute;
    z-index: 9;
    width: 20px;
    height: 20px;
}

.resizeUI {
  position: absolute;
  bottom: 0;
  right: 0;
  background: inherit;
  padding: 0px 3px;
  pointer-events: none;
  cursor: e-resize;
}

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div id="resizableDiv">
Resizable div for a single user working with Chrome
<div class="resizeUI"><i class="fa fa-arrows-h"></i></div>
</div>

如何在悬停时更改resize属性图标和光标

1 个答案: