时间戳

首页 > 解决方案 > 鼠标悬停和键盘焦点的CSS“工具提示”

html - 鼠标悬停和键盘焦点的CSS“工具提示”

问题描述

可预知的

我有一个网站，我在其中记录了已安装的 pythonic 库的列表。

对于每个库，我希望有：

我目前的解决方案是使用名称作为链接的文本，href'd to its documentation，并接受版本和描述是补充信息，并且可以使用工具提示提供给用户 - 这样他们就可以坐在一个title属性中

例子：

Data Visualization tools: 
<a href='https://docs.bokeh.org/en/latest/docs/user_guide.html'
   title='Interactive Web Plotting for Python - version: 2.3.3'>bokeh</a>,
<a href='https://graphviz.gitlab.io/documentation/'
   title='creation and rendering of graph descriptions in the DOT language of the Graphviz graph
          drawing software - version: 2.48.0'>graphviz</a>,

这使 UI 简洁：它只是一个库列表，我可以按功能类型对其进行分组，并为大多数用户提供信息。

问题

这很好用，但是它有两个问题：

  1. 可访问性并不好 - 补充信息对非视觉读者隐藏
  2. 如果使用键盘选择了项目，则工具提示不会显示

所需的解决方案

我正在寻找两种解决方案：

  1. 为非视觉用户提供补充信息
  2. 使任何切换补充信息的东西都适用于鼠标悬停和键盘焦点

我有 #1 的解决方案 - 在 CodePen 或以下问题中查看我的演示：https ://codepen.io/perllaghu/pen/NWgdgJb

....但我就是不知道怎么做:focus！我不确定它是元素顺序/放置的事情，还是选择器的事情......

<html lang="en">

<head>
  <title>Hack</title>
  <style>
    /* * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            } */
    
    html {
      --darkgrey: #333333;
      --lightgrey: #cccccc;
      --darkblue: #041e42;
      --lightblue: #0099ff;
      --red: #a50034;
      --yellow: #f4aa00;
      --pastel: #fff0e8;
      --white: #ffffff;
      --green: #00A611;
      --ff-title: "Poppins", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
      --ff-body: -system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Arial, sans-serif;
      font-size: 18px;
      font-weight: 400;
      line-height: 1.35;
      font-family: var(--ff-body);
      background: var(--white);
      color: var(--darkgrey);
    }
    
    *:focus {
      outline: 4px solid var(--lightblue) !important;
      outline-offset: 3px;
    }
    
    .side-padding {
      padding-left: 10%;
      padding-right: 10%;
    }
    
    a,
    a:hover,
    a:visited {
      text-decoration: none;
      color: inherit;
      border-bottom: 1px dotted #004b6b;
      border-radius: 5px;
    }
    
    #policy ul {
      margin-left: 3rem;
      margin-bottom: 1rem;
    }
    
    #policy li a,
    #policy li a:hover,
    #policy li a:visited {
      text-decoration: none;
      border-bottom: 1px dotted #004b6b;
      color: var(--darkblue);
    }
    
    #policy li span {
      color: var(--darkblue);
    }
    
    .set_of_libs {
      position: relative;
    }
    
    .set_of_libs span span {
      display: none;
      position: absolute;
      border: 1px solid var(--darkblue);
      border-radius: 0.5rem;
      background-color: var(--darkblue);
      color: var(--pastel) !important;
      padding: 0.5rem;
      transform: translate(-50%, 50%);
      z-index: 10;
      max-width: 50%;
    }
    
    .set_of_libs span:hover span,
    .set_of_libs span:focus span {
      display: inline;
    }
  </style>
</head>

<body>
  <header aria-label="Header section`">
    <h1>Obligatory h1 Heading</h1>
  </header>
  <main id="policy" class="side-padding" aria-label="The Notebooks">
    <h2>A main heading</h2>

    <section aria-labelledby="standard_notebook_h3">
      <h3 id="standard_notebook_h3">Standard Notebook</h3>
      <p>Standard Notebook is the default python 3 notebook, with a wide selection of libraries includes.</p>
      <ul>

        <li class="set_of_libs">
          Based on the <span><a href="https://github.com/jupyter/docker-stacks/tree/master/minimal-notebook" >jupyter/minimal-notebook</a> <span>(Jupyter's minimal notebook)</span></span> image.
        </li>

        <li class="set_of_libs">
          Includes <span><a href="https://nbgrader.readthedocs.io/en/stable/" >nbgrader</a> <span>(A system for assigning and grading Jupyter notebooks)</span></span> and <span><a href="https://github.com/edina/plusGitRepo" >+GitRepo</a> <span>(+GitRepo lets your students collect content from a git repository.)</span></span>
          tools for document sharing.
        </li>

        <li class="set_of_libs">
          Provide <span><a href="https://github.com/ipython-contrib/jupyter_contrib_nbextensions/blob/master/src/jupyter_contrib_nbextensions/nbextensions/rubberband/readme.md" >rubberband</a> <span>(Multi-Cell selection using a rubberband.)</span></span>,
          <span><a href="https://github.com/ipython-contrib/jupyter_contrib_nbextensions/blob/master/src/jupyter_contrib_nbextensions/nbextensions/exercise/readme.md" >exercise</a> <span>(Extension for hiding/showing solutions cells)</span></span>, and
          <span><a href="https://github.com/ipython-contrib/jupyter_contrib_nbextensions/blob/master/src/jupyter_contrib_nbextensions/nbextensions/exercise2/readme.md" >exercise-2</a> <span>(Extension for hiding/showing solutions cells)</span></span>
          extensions. <strong>Note</strong> these are not related to nbgrader in any way.
        </li>

        <li class="set_of_libs">
          Data Access libraries&#58; <span><a href='https://www.crummy.com/software/BeautifulSoup/bs4/doc/' >beautifulsoup4</a> <span>(Python library designed for screen-scraping - version: 4.9.3)</span></span>, <span><a href='https://pypi.org/project/dill/' >dill</a> <span>(Serialize all of python (almost) - version: 0.3.4)</span></span>,
          <span><a href='https://github.com/gitpython-developers/gitdb' >gitdb2</a> <span>(GitDB allows you to access bare git repositories for reading and writing - version: 4.0.2)</span></span>, <span><a href='http://xmlsoft.org/html/index.html' >libxml2</a> <span>(The XML C parser and toolkit of Gnome - version: 2.9.12)</span></span>,
          <span><a href='https://lxml.de/' >lxml</a> <span>(Pythonic binding for the C libraries libxml2 and libxslt - version: 4.6.3)</span></span>, <span><a href='https://dev.mysql.com/doc/connector-python/en/' >mysql-connector-python</a> <span>(Enables Python programs to access MySQL databases, using an API that is compliant with the Python Database API Specification v2.0 (PEP 249) - version: 8.0.25)</span></span>,
          <span><a href='https://openpyxl.readthedocs.io/en/stable/' >openpyxl</a> <span>(a Python library to read/write Excel 2010 xlsx/xlsm/xltx/xltm files - version: 3.0.7)</span></span>, <span><a href='https://developers.google.com/protocol-buffers/docs/pythontutorial' >protobuf</a> <span>(Protocol Buffers - Googles data interchange format - version: 3.16.0)</span></span>,
          <span><a href='https://github.com/willtrnr/pyxlsb' >pyxlsb</a> <span>(an Excel 2007-2010 Binary Workbook (xlsb) parser for Python - version: 1.0.8)</span></span>, <span><a href='https://docs.sqlalchemy.org/en/13/' >sqlalchemy</a> <span>(Database Abstraction Library - version: 1.4.22)</span></span>,
          <span><a href='https://anaconda.org/conda-forge/sqlite' >sqlite</a> <span>(SQLite darabase engine/server - version: 3.35.5)</span></span>, <span><a href='https://textblob.readthedocs.io/en/dev/' >textblob</a> <span>(Simple, Pythonic text processing. Sentiment analysis, part-of-speech tagging, noun phrase parsing, and more - version: 0.15.3)</span></span>,
          <span><a href='http://www.unixodbc.org/' >unixodbc</a> <span>(ODBC on non MS Windows platforms - version: 2.3.9)</span></span>, <span><a href='https://xlrd.readthedocs.io/en/latest/' >xlrd</a> <span>(Library for developers to extract data from Microsoft Excel (tm) spreadsheet files - version: 2.0.1)</span></span>,
          <span><a href='https://xlwt.readthedocs.io/en/latest/' >xlwt</a> <span>(a library for developers to use to generate spreadsheet files compatible with Microsoft Excel versions 95 to 2003 - version: 1.3.0)</span></span>, <span><a href='https://xlsxwriter.readthedocs.io/' >xlsxwriter</a> <span>(a Python module for creating Excel XLSX files - version: 1.4.4)</span></span>,
          and <span><a href='https://xmlschema.readthedocs.io/en/latest/' >xmlschema</a> <span>(An implementation of XML Schema for Python - version: 1.6.4)</span></span>
        </li>

        <li>
          Data Visualization tools&#58; <a href='https://docs.bokeh.org/en/latest/docs/user_guide.html' title='Interactive Web Plotting for Python - version: 2.3.3'>bokeh</a>, <a href='https://graphviz.gitlab.io/documentation/' title='creation and rendering of graph descriptions in the DOT language of the Graphviz graph drawing software - version: 2.48.0'>graphviz</a>,
          <a href='https://hvplot.holoviz.org/' title='0.7.3'>hvplot</a>, <a href='https://ipywidgets.readthedocs.io/en/latest/' title='Jupyter interactive widgets - version: 7.6.3'>ipywidgets</a>, <a href='https://github.com/matplotlib/ipympl' title='Matplotlib Jupyter Extension - version: 0.7.0'>ipympl</a>,
          <a href='https://github.com/K3D-tools/K3D-jupyter' title='K3D lets you create 3D plots backed by WebGL with high-level API (surfaces, isosurfaces, voxels, mesh, cloud points, vtk objects, volume renderer, colormaps, etc) - version: 2.9.7'>k3d</a>,
          <a href='https://matplotlib.org/contents.html' title='Publication quality features in Python - version: 3.4.2'>matplotlib-base</a>, <a href='https://mpld3.github.io/' title='D3 Viewer for matplotlib - version: 0.5.5'>mpld3</a>, <a href='https://jiffyclub.github.io/palettable/'
            title='Palettable (formerly brewer2mpl) is a library of color palettes for Python - version: 3.3.0'>palettable</a>, <a href='https://plotly.com/python/' title='An interactive, browser-based graphing library for Python - version: 5.1.0'>plotly</a>,
          <a href='https://geostat-framework.readthedocs.io/projects/pykrige/en/stable/' title='Supports 2D and 3D ordinary and universal kriging - version: 1.6.0'>pykrige</a>, <a href='https://docs.pymc.io/' title='PyMC3 allows you to write down models using an intuitive syntax to describe a data generating process - version: 3.11.2'>pymc3</a>,
          <a href='https://seaborn.pydata.org/' title='Statistical data visualization - version: 0.11.1'>seaborn</a>, <a href='https://pypi.org/project/widgetsnbextension/' title='Interactive HTML Widgets for Jupyter - version: 3.5.1'>widgetsnbextension</a>,
          and <a href='http://amueller.github.io/word_cloud/' title='A little word cloud generator in Python - version: 1.8.1'>wordcloud</a>
        </li>

      </ul>
    </section>
  </main>
</body>

</html>

标签： htmlcsscss-selectorsweb-accessibility

解决方案

使用focus-within而不是focus

.set_of_libs span:hover span,
.set_of_libs span:focus-within span {
    display: inline;
}


html {
  --darkgrey: #333333;
  --lightgrey: #cccccc;
  --darkblue: #041e42;
  --lightblue: #0099ff;
  --red: #a50034;
  --yellow: #f4aa00;
  --pastel: #fff0e8;
  --white: #ffffff;
  --green: #00A611;
  --ff-title: "Poppins", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
  --ff-body: -system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  font-family: var(--ff-body);
  background: var(--white);
  color: var(--darkgrey);
}

*:focus {
  outline: 4px solid var(--lightblue) !important;
  outline-offset: 3px;
}

.side-padding {
  padding-left: 10%;
  padding-right: 10%;
}

a,
a:hover,
a:visited {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px dotted #004b6b;
  border-radius: 5px;
}

#policy ul {
  margin-left: 3rem;
  margin-bottom: 1rem;
}

#policy li a,
#policy li a:hover,
#policy li a:visited {
  text-decoration: none;
  border-bottom: 1px dotted #004b6b;
  color: var(--darkblue);
}

#policy li span {
  color: var(--darkblue);
}

.set_of_libs {
  position: relative;
}

.set_of_libs span span {
  display: none;
  position: absolute;
  border: 1px solid var(--darkblue);
  border-radius: 0.5rem;
  background-color: var(--darkblue);
  color: var(--pastel) !important;
  padding: 0.5rem;
  transform: translate(-50%, 50%);
  z-index: 10;
  max-width: 50%;
}

.set_of_libs span:hover span,
.set_of_libs span:focus-within span {
  display: inline;
}
<header aria-label="Header section`">
  <h1>Obligatory h1 Heading</h1>
</header>
<main id="policy" class="side-padding" aria-label="The Notebooks">
  <h2>A main heading</h2>

  <section aria-labelledby="standard_notebook_h3">
    <h3 id="standard_notebook_h3">Standard Notebook</h3>
    <p>Standard Notebook is the default python 3 notebook, with a wide selection of libraries includes.</p>
    <ul>

      <li class="set_of_libs">
        Based on the <span><a href="https://github.com/jupyter/docker-stacks/tree/master/minimal-notebook">jupyter/minimal-notebook</a> <span>(Jupyter's minimal notebook)</span></span> image.
      </li>

      <li class="set_of_libs">
        Includes <span><a href="https://nbgrader.readthedocs.io/en/stable/">nbgrader</a> <span>(A system for assigning and grading Jupyter notebooks)</span></span> and <span><a href="https://github.com/edina/plusGitRepo">+GitRepo</a> <span>(+GitRepo lets your students collect content from a git repository.)</span></span>
        tools for document sharing.
      </li>

      <li class="set_of_libs">
        Provide <span><a href="https://github.com/ipython-contrib/jupyter_contrib_nbextensions/blob/master/src/jupyter_contrib_nbextensions/nbextensions/rubberband/readme.md">rubberband</a> <span>(Multi-Cell selection using a rubberband.)</span></span>,
        <span><a href="https://github.com/ipython-contrib/jupyter_contrib_nbextensions/blob/master/src/jupyter_contrib_nbextensions/nbextensions/exercise/readme.md">exercise</a> <span>(Extension for hiding/showing solutions cells)</span></span>, and
        <span><a href="https://github.com/ipython-contrib/jupyter_contrib_nbextensions/blob/master/src/jupyter_contrib_nbextensions/nbextensions/exercise2/readme.md">exercise-2</a> <span>(Extension for hiding/showing solutions cells)</span></span> extensions.
        <strong>Note</strong> these are not related to nbgrader in any way.
      </li>

      <li class="set_of_libs">
        Data Access libraries&#58; <span><a href='https://www.crummy.com/software/BeautifulSoup/bs4/doc/'>beautifulsoup4</a> <span>(Python library designed for screen-scraping - version: 4.9.3)</span></span>, <span><a href='https://pypi.org/project/dill/'>dill</a> <span>(Serialize all of python (almost) - version: 0.3.4)</span></span>,
        <span><a href='https://github.com/gitpython-developers/gitdb'>gitdb2</a> <span>(GitDB allows you to access bare git repositories for reading and writing - version: 4.0.2)</span></span>, <span><a href='http://xmlsoft.org/html/index.html'>libxml2</a> <span>(The XML C parser and toolkit of Gnome - version: 2.9.12)</span></span>,
        <span><a href='https://lxml.de/'>lxml</a> <span>(Pythonic binding for the C libraries libxml2 and libxslt - version: 4.6.3)</span></span>, <span><a href='https://dev.mysql.com/doc/connector-python/en/'>mysql-connector-python</a> <span>(Enables Python programs to access MySQL databases, using an API that is compliant with the Python Database API Specification v2.0 (PEP 249) - version: 8.0.25)</span></span>,
        <span><a href='https://openpyxl.readthedocs.io/en/stable/'>openpyxl</a> <span>(a Python library to read/write Excel 2010 xlsx/xlsm/xltx/xltm files - version: 3.0.7)</span></span>, <span><a href='https://developers.google.com/protocol-buffers/docs/pythontutorial'>protobuf</a> <span>(Protocol Buffers - Googles data interchange format - version: 3.16.0)</span></span>,
        <span><a href='https://github.com/willtrnr/pyxlsb'>pyxlsb</a> <span>(an Excel 2007-2010 Binary Workbook (xlsb) parser for Python - version: 1.0.8)</span></span>, <span><a href='https://docs.sqlalchemy.org/en/13/'>sqlalchemy</a> <span>(Database Abstraction Library - version: 1.4.22)</span></span>,
        <span><a href='https://anaconda.org/conda-forge/sqlite'>sqlite</a> <span>(SQLite darabase engine/server - version: 3.35.5)</span></span>, <span><a href='https://textblob.readthedocs.io/en/dev/'>textblob</a> <span>(Simple, Pythonic text processing. Sentiment analysis, part-of-speech tagging, noun phrase parsing, and more - version: 0.15.3)</span></span>,
        <span><a href='http://www.unixodbc.org/'>unixodbc</a> <span>(ODBC on non MS Windows platforms - version: 2.3.9)</span></span>, <span><a href='https://xlrd.readthedocs.io/en/latest/'>xlrd</a> <span>(Library for developers to extract data from Microsoft Excel (tm) spreadsheet files - version: 2.0.1)</span></span>,
        <span><a href='https://xlwt.readthedocs.io/en/latest/'>xlwt</a> <span>(a library for developers to use to generate spreadsheet files compatible with Microsoft Excel versions 95 to 2003 - version: 1.3.0)</span></span>, <span><a href='https://xlsxwriter.readthedocs.io/'>xlsxwriter</a> <span>(a Python module for creating Excel XLSX files - version: 1.4.4)</span></span>,
        and <span><a href='https://xmlschema.readthedocs.io/en/latest/'>xmlschema</a> <span>(An implementation of XML Schema for Python - version: 1.6.4)</span></span>
      </li>

      <li>
        Data Visualization tools&#58; <a href='https://docs.bokeh.org/en/latest/docs/user_guide.html' title='Interactive Web Plotting for Python - version: 2.3.3'>bokeh</a>, <a href='https://graphviz.gitlab.io/documentation/' title='creation and rendering of graph descriptions in the DOT language of the Graphviz graph drawing software - version: 2.48.0'>graphviz</a>,
        <a href='https://hvplot.holoviz.org/' title='0.7.3'>hvplot</a>, <a href='https://ipywidgets.readthedocs.io/en/latest/' title='Jupyter interactive widgets - version: 7.6.3'>ipywidgets</a>, <a href='https://github.com/matplotlib/ipympl' title='Matplotlib Jupyter Extension - version: 0.7.0'>ipympl</a>,
        <a href='https://github.com/K3D-tools/K3D-jupyter' title='K3D lets you create 3D plots backed by WebGL with high-level API (surfaces, isosurfaces, voxels, mesh, cloud points, vtk objects, volume renderer, colormaps, etc) - version: 2.9.7'>k3d</a>,
        <a href='https://matplotlib.org/contents.html' title='Publication quality features in Python - version: 3.4.2'>matplotlib-base</a>, <a href='https://mpld3.github.io/' title='D3 Viewer for matplotlib - version: 0.5.5'>mpld3</a>, <a href='https://jiffyclub.github.io/palettable/'
          title='Palettable (formerly brewer2mpl) is a library of color palettes for Python - version: 3.3.0'>palettable</a>, <a href='https://plotly.com/python/' title='An interactive, browser-based graphing library for Python - version: 5.1.0'>plotly</a>,
        <a href='https://geostat-framework.readthedocs.io/projects/pykrige/en/stable/' title='Supports 2D and 3D ordinary and universal kriging - version: 1.6.0'>pykrige</a>, <a href='https://docs.pymc.io/' title='PyMC3 allows you to write down models using an intuitive syntax to describe a data generating process - version: 3.11.2'>pymc3</a>,
        <a href='https://seaborn.pydata.org/' title='Statistical data visualization - version: 0.11.1'>seaborn</a>, <a href='https://pypi.org/project/widgetsnbextension/' title='Interactive HTML Widgets for Jupyter - version: 3.5.1'>widgetsnbextension</a>,
        and <a href='http://amueller.github.io/word_cloud/' title='A little word cloud generator in Python - version: 1.8.1'>wordcloud</a>
      </li>

    </ul>
  </section>
</main>

推荐阅读