用于鼠标悬停和键盘焦点的 CSS "tooltips"

我有一个网站，在那里我记录了安装的python库列表。

对于每个库，我希望有可用的:

库名
指向库
库简介
当前安装的版本

我目前的解决方案是使用名称作为链接的文本，href'd到其文档，并接受版本&描述是补充信息，可以通过工具提示提供给用户，因此它们可以放在title属性

中。的例子:

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>,

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

这个工作得很好，但是它有两个问题:

对于可访问性来说不是很好-补充信息对非视觉读者是隐藏的
工具提示不显示项目是否使用键盘选择

我正在寻找使任何切换补充信息工作的鼠标悬停和键盘焦点

…但我就是不知道如何使: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>

参见我在CodePen的演示:https://codepen.io/perllaghu/pen/NWgdgJb

使用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>

相关内容

最新更新

热门标签：