Question

我正在尝试创建一个具有以下两个功能的表：

某种带阴影的＆＃39;带来阴影的＆＃39;或者＆＃39; 3d效果＆＃39;我在一些网站上看到并发现非常愉快。
鼠标光标应该有＆＃39;手＆＃39;表示该行可点击的图标。

每当用户将鼠标悬停在表格的各行上时，我都需要显示这些功能。我尝试使用Bootstrap 4 table-hover类的功能，但无法实现这两个功能中的任何一个。

对于第一个功能，我想知道为正在悬停的<tr>添加一个带阴影的类。但是，如果这是最好的方法，请不要知道。 是否有一些已经定义的类可以实现此类行为？

对于第二个功能，我不知道。有什么建议吗？

这是我的代码：

<div class="container">
<div class="table-wrapper">
  <table class="table">
    <thead id="thead_st" class="thead">
      <tr>
        <th class="thead-row" scope="col"></th>
        <th class="thead-row" scope="col">1</th>
        <th class="thead-row" scope="col">2</th>
        <th class="thead-row" scope="col">3</th>
        <th class="thead-row" scope="col">4</th>
        <th class="thead-row" scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr class="trow">
        <th scope="row"></th>
        <td class="score">4.7</td>
        <td>Bla bla</td>
        <td>2</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

CSS：

.table-wrapper {
  border-radius: 8px;
  overflow: hidden;
}

.container {
   margin-top: 50px;
   margin-bottom: 50px;
   background: white;
   border-radius: 8px;
   padding: 0px;
}

body {
   background: #ECEEF1;
   font-family: 'Roboto', sans-serif;
   color: #2C3A56;
}

tr {
  font-size: 16.5px;
  line-height: 50px;
  padding: 0px;
  font-weight: 100;
}

td, th {
  display: table-cell;
  text-align: center;
}

#thead_st {
  background-color: #F6CE52;
  border: 3px solid #F6CE52;
  color: white;
}

.thead-row {
    line-height: 20px;
    font-weight: 100;
}


.trow:hover {
   cursor:pointer; //set the cursor to pointer (hand)
   background-color: blue; //sets hovered row's background color to blue
   box-shadow: 5px 10px #888888;
}

Answer 1

在css中，假设您的.row有.row:hover{ cursor:pointer; //set the cursor to pointer (hand) background-color:blue; //sets hovered row's background color to blue box-shadow: 5px 10px #888888; //this is a box shadowing effect that you can tweak at your choice. }类：

width

如果您想要进一步制作“3D”效果，则可以使用height元素的<tr>和hover属性，使其比using System; using System.Runtime.InteropServices; using System.Text; using System.Windows.Forms; namespace WindowsFormsApp1 { public partial class Form1 : Form { internal struct WINDOWINFO { public uint ownerpid; public uint childpid; } [DllImport("user32.dll", SetLastError = true)] public static extern uint GetWindowThreadProcessId(IntPtr hWnd, out uint lpdwProcessId); [DllImport("user32", SetLastError = true)] [return: MarshalAs(UnmanagedType.Bool)] public static extern bool EnumChildWindows(IntPtr hWndParent, EnumWindowProc lpEnumFunc, IntPtr lParam); [DllImport("user32.dll")] static extern IntPtr SetWinEventHook(uint eventMin, uint eventMax, IntPtr hmodWinEventProc, WinEventDelegate lpfnWinEventProc, uint idProcess, uint idThread, uint dwFlags); [DllImport("kernel32.dll", SetLastError = true)] public static extern bool QueryFullProcessImageName([In]IntPtr hProcess, [In]int dwFlags, [Out]StringBuilder lpExeName, ref int lpdwSize); [DllImport("kernel32.dll", SetLastError = true)] public static extern IntPtr OpenProcess(UInt32 dwDesiredAccess, [MarshalAs(UnmanagedType.Bool)]Boolean bInheritHandle, Int32 dwProcessId); WinEventDelegate dele = null; public delegate bool EnumWindowProc(IntPtr hWnd, IntPtr parameter); delegate void WinEventDelegate(IntPtr hWinEventHook, uint eventType, IntPtr hwnd, int idObject, int idChild, uint dwEventThread, uint dwmsEventTime); public const UInt32 PROCESS_QUERY_INFORMATION = 0x400; public const UInt32 PROCESS_VM_READ = 0x010; private const uint WINEVENT_OUTOFCONTEXT = 0; private const uint EVENT_SYSTEM_FOREGROUND = 3; private static string UWP_AppName(IntPtr hWnd, uint pID) { WINDOWINFO windowinfo = new WINDOWINFO(); windowinfo.ownerpid = pID; windowinfo.childpid = windowinfo.ownerpid; IntPtr pWindowinfo = Marshal.AllocHGlobal(Marshal.SizeOf(windowinfo)); Marshal.StructureToPtr(windowinfo, pWindowinfo, false); EnumWindowProc lpEnumFunc = new EnumWindowProc(EnumChildWindowsCallback); EnumChildWindows(hWnd, lpEnumFunc, pWindowinfo); windowinfo = (WINDOWINFO)Marshal.PtrToStructure(pWindowinfo, typeof(WINDOWINFO)); IntPtr proc; if ((proc = OpenProcess(PROCESS_QUERY_INFORMATION | PROCESS_VM_READ, false, (int)windowinfo.childpid)) == IntPtr.Zero) return null; int capacity = 2000; StringBuilder sb = new StringBuilder(capacity); QueryFullProcessImageName(proc, 0, sb, ref capacity); Marshal.FreeHGlobal(pWindowinfo); return sb.ToString(0, capacity); } private static bool EnumChildWindowsCallback(IntPtr hWnd, IntPtr lParam) { WINDOWINFO info = (WINDOWINFO)Marshal.PtrToStructure(lParam, typeof(WINDOWINFO)); uint pID; GetWindowThreadProcessId(hWnd, out pID); if (pID != info.ownerpid) info.childpid = pID; Marshal.StructureToPtr(info, lParam, true); return true; } public Form1() { InitializeComponent(); dele = new WinEventDelegate(WinEventProc); IntPtr m_hhook = SetWinEventHook(EVENT_SYSTEM_FOREGROUND, EVENT_SYSTEM_FOREGROUND, IntPtr.Zero, dele, 0, 0, WINEVENT_OUTOFCONTEXT); } public void WinEventProc(IntPtr hWinEventHook, uint eventType, IntPtr hwnd, int idObject, int idChild, uint dwEventThread, uint dwmsEventTime) { textBox1.Text = ""; uint pID; GetWindowThreadProcessId(hwnd, out pID); textBox1.Text = UWP_AppName(hwnd, pID); } } }元素更大。 1}}事件。

当我以前使用3D效果时，我通常会使用2D Transforms来调整带有翻译属性的定位。

Answer 2

请检查以下小提琴。你的两个要求已经完成。

带阴影的某种“带头”＆＃39;或者＆＃39; 3d效果＆＃39;我在一些网站上看到并发现非常愉快。
鼠标光标应该有＆＃39;手＆＃39;表示该行可点击的图标。

Fiddle

esp8266

如何使表格行可点击并通过直观地将其突出显示来突出显示它？

2 个答案: