css如何滚动鼠标背景不变页面内容改变

2023-03-07 02:31 35次浏览攻略

滑鼠指向效果提示是指将滑鼠置于元素上时，浏览器中会弹出的黄色小文字方块。一般开发人员大多与JavaScript结合，创建各种自定义提示。实际上，通过CSS位置也可以。首先，我们来看一下效果图。

接下来，将详细说明实现方法。

首先，创建带有简单链接的HTML(如有必要)，在链接中显示的文本后面添加需要提示的内容，并将其放置在span标记(粗体部分)中。

A href=' www.laostyle=' text-decoration : none ' www。你知道的。comspan(未满18岁请勿点击)/span/a is a Horror Movies Website。

以下是主要部分。首先，将链接的位置属性设置为relative。因为a是span的父元素，所以可以确保span的提示内容根据a中的链接文本进行绝对定位。

<span>中的提示内容我们不希望它一开始就显示出来，所以要将它的display属性设置为none.

a{position:relative;}

a span{display:none;}

当鼠标悬停在链接上时我们希望显示出span中的提示内容，这时就需要将span的display属性设置为block，为了让其出现在链接的右下方，需要将span的position属性设置为absolute，并设置一定的距离（顶部1em,左边2em).

a{position:relative;}

a span{display:none;}

a:hover span{display:block;

position:absolute;top:1em;left:2em;}

前两步基已经完成了本次案例的主体，剩下的就是给span添加一些样式，让它看起来更像是提示。可以添加一些内边距边框和背景颜色等。

a{position:relative;}

a span{display:none;}

a:hover span{display:block;

position:absolute;top:1em;left:2em;

width:160px;

padding:0.2em 0.6em;

border:1px solid #996633;

background-color:#FFFF66;

color:red;}

</style>

PS:最后科普一下display:none与visible:hidden的区别

display:none —不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

visible:hidden— 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。

1.文章《css如何滚动鼠标背景不变页面内容改变》援引自互联网，为网友投稿收集整理，仅供学习和研究使用，内容仅代表作者本人观点，与本网站无关，侵删请点击页脚联系方式。

2.文章《css如何滚动鼠标背景不变页面内容改变》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

css如何滚动鼠标背景不变 页面内容改变