UWP Webview：CSS：悬停支持？答案

【问题标题】：UWP Webview: CSS :hover support?UWP Webview：CSS：悬停支持？
【发布时间】：2021-01-09 17:03:28
【问题描述】：

我的 UWP 应用程序中有一个 webview，它显示了一些文本。有些文本是可点击的（）。我尝试添加以下 CSS 并将其包含在 HTML 中，但它似乎不起作用。

a:hover {
   color: red;
}

webview 是否支持在 UWP 应用程序中悬停？我一直无法找到有关此的任何信息。

编辑：这是 HTML。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8"/>
    <style>
      body {
        font-family: 'Segoe UI';
        font-size: 10pt;
        color: #FFFFFF;
      }
      .link {
        text-decoration: none;
        color: #FFFFFF;
      }
      .link:hover {
        background-color: red;
      } 
      .linenumber {
        display: inline-block;
        width: 50px;
        min-width: 50px;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <a class='link'>
      <div>
        <div class='linenumber'>1</div>
        Alpha
      </div>
    </a>
    <a class='link'>
      <div>
        <div class='linenumber'>2</div>
        Beta
      </div>
    </a>
    <script type='text/javascript'>
      for (var i = 0; i < document.links.length; i++) { 
        document.links[i].onclick = function() { 
          window.external.notify(this.href); 
          return false; 
        } 
      }
    </script>
  </body>
</html>
}

【问题讨论】：

下面的 css 对你有用吗？
不，它不起作用。我已将我的 HTML 添加到顶帖。

标签： webview uwp

【解决方案1】：

UWP Webview：CSS :hover 支持？

UWP Webview 支持 css :hover 标签，你可以像下面这样在 html 中放置样式。并使用 ms-appx-web uri 方案加载 html。

HTML

<!DOCTYPE html>
<style>
   a:hover{
       color:red;
   }
</style>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Hello Html</title>
</head>
<body>
    <a href="https://www.google.com" >Click Me</a>
</body>
</html>

Xaml

<Grid>
    <WebView Source="ms-appx-web:///TestPage.html"/>
</Grid>

更新

<style>
    body {
        font-family: 'Segoe UI';
        font-size: 18pt;
        color: #FFFFFF;
    }
    .link {
        text-decoration: none;
        color: #000000;
    }
    .link:hover{
        color:red;
    }
    .linenumber {
        display: inline-block;
        width: 50px;
        min-width: 50px;
        margin-right: 10px;
    }
</style>

【讨论】：

对我不起作用。我已将 HTML 代码添加到顶帖。
请使用更新部分的样式。 woks 在我身边。
不适合我。难道是我用 StringBuilder 构建我的 HTML 吗？内容是高度动态的，所以我需要这样做。
您需要编辑您的样式，文本颜色与正文颜色相同，这将使文本隐藏。如果要编辑悬停颜色，请使用.link:hover{ color:red; }，但不要使用background-color。
颜色也不起作用。当我将鼠标悬停在链接上时，我在 :hover 样式中放置的内容均不适用。