css里怎么设置让一段文字隐藏，然后鼠标悬停又出现那段字，如果要用js的话，请把代码详细一点的写出来

Posted 2023-05-09

<div class="diyiduan">
<h4 style="box-sizing: border-box; font-family: arial, 'Microsoft YaHei', 微软雅黑; line-height: 1; color: rgb(48, 48, 48); margin: 0px 0px 15px; font-size: 18px; padding: 0px;">
一、加快发展和完善技术市场，是推进国家创新体系建设的重要内容
</h4>
<p style="box-sizing: border-box; margin: 0px 20px 20px; padding: 0px; color: rgb(80, 80, 80); font-family: Lato, Verdana, sans-serif; font-size: 14px; line-height: 22.4px;">
1.开拓技术市场是我国科技体制改革的重大举措之一。20年来，我国技术市场发展取得了巨大成就，市场规模迅速扩大，技术交易日趋活跃，交易形式不断创 新，服务水平日益提高，已经成为社会主义市场经济体系和国家创新体系不可缺少的重要组成部分，为优化科技资源配置，加速科技成果向现实生产力转化，提高企 业的技术竞争力，促进经济结构调整和经济发展，做出了卓越的贡献。
</p>
<p style="box-sizing: border-box; margin: 0px 20px 20px; padding: 0px; color: rgb(80, 80, 80); font-family: Lato, Verdana, sans-serif; font-size: 14px; line-height: 22.4px;">
2.我国经济社会和科技发展已进入新的阶段，技术市场面临新的机遇和挑战。随着世界新科技革命的迅速发展和经济全球化进程的加快，资本、技术和劳动力等要 素在全球范围内的流动与配置更加普遍，科技创新能力已成为提升国家竞争力的决定性因素。技术市场是社会主义市场经济体系的重要要素市场。现代技术市场体系 建设是国家创新体系的重要架构和提高自主创新能力的重要内容。加快发展技术市场，有利于完善社会主义市场经济体制和深化科技体制改革，促进科技资源的优化 配置，提高科技资源的利用和转化效率；有利于营造良好的市场环境和制度保障，推动企业成为技术创新主体，促进自主创新战略的实施；有利于加快技术创新成果 的转化，充分发挥技术市场促进成果转化主渠道的作用，加速我国经济结构调整和经济增长方式的转变。各级科技行政管理主管部门都应该统一思想，从战略高度充 分认识发展技术市场对提升我国科学技术整体实力、自主创新能力和促进经济社会全面协调发展的重要意义，采取更加有力的措施加快发展和完善技术市场。
</p>
<p style="box-sizing: border-box; margin: 0px 20px 20px; padding: 0px; color: rgb(80, 80, 80); font-family: Lato, Verdana, sans-serif; font-size: 14px; line-height: 22.4px;">
3.我国技术市场虽然取得了很大发展，但相对于我国科技进步和科技实力的迅速增长而言，其功能和效力远未得到充分发挥，仍需加快培育和完善。为适应我国科 技发展战略的全面调整，更大程度地发挥市场在优化配置科技资源中的基础性作用，技术市场今后一个时期发展的主要方向是加快现代技术市场体系和制度的健全与 完善，为提高自主创新能力创造良好环境。
</p>
</div>
我要2,3隐藏，鼠标不动只显示1

参考技术A 把后两个p标签，加上class=“p”,在标签的style里面，增加 display:none;
css里面:
.p hover
display:block;
追问

鼠标上去没出来，隐是隐掉了

追答

css忘了加冒号。

.p:hover...

追问

不行，没用，我看百度上说要用js

追答

貌似得用a标签。你试试用a标签包裹住这几个p标签，然后用a：hover

参考技术B .diyiduan h4+p~pdisplay:none;
.diyiduan h4+p:hover~pdisplay:block;

追问

还是不行啊，我看另一个知道上说是要用js，但是我刚学js，那个写的我看不懂

追答

用的啥浏览器啊？你用火狐或者谷歌看看呢？

追问

都用过了，测试用浏览器我全都装了

追答

你看看这个demo，用js吧，刚才那个可能不太兼容。

本回答被提问者采纳

鼠标悬停相关操作

css相关操作：

常用场景：

1. 给盒子加阴影

.operater-item:hover {
  box-shadow: 0 3px 7px 0 rgba(174, 174, 174, 0.5);
}

2. 悬停显示文字

<div title="悬停显示的说明文字">悬停显示文字</div>

3. 悬停显示隐藏的子元素盒子

    即hover同样可以对子元素进行样式操作

<div class="operater-item">

    <div class="operater-icon">隐藏的子标签</div>

    鼠标悬停在此部分会显示隐藏的子标签内容

</div>

.operater-icon {
display: none;
}

.operater-item:hover .operater-icon {
display: block;
}

js鼠标悬停事件处理方式：

1.光标悬停是mouseover事件，光标离开是mouseout事件，

  在html代码中就是设置onmouseover和onmouseout属性。例如下：

 

//假设a的样式已经明确
<span id=‘a‘ onmouseover="fc1(this)"
 onmouseout="fc2(this)"></span>

    

function fc1(node){
        node.style.width = ‘200px‘;
    }
    function fc2(node){
        node.style.width = ‘100px‘;
    }

 

暂时先总结这么多，路漫漫长矣~