클릭 후 CSS 탐색 메뉴를 배경 이미지로 변경하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

클릭 후 CSS 탐색 메뉴를 배경 이미지로 변경하는 방법은 무엇입니까?

黄舟

Jul 19, 2017 pm 03:17 PM

css

이제 메뉴 위로 마우스를 이동하면 배경색이 변경되고, 마우스를 이동하거나 클릭하면 원래 색상으로 돌아갑니다. 이제 클릭 후의 배경색은 마우스를 이동할 때의 배경색입니다. 이전 메뉴의 배경색이 원래 색상으로 돌아갑니다.

---css 부분------

<style>
/*下拉菜单样式*/

#div_center { width:100%; height:33px;  margin-left: auto;margin-right:auto;}  /*定义总体宽度、高度；background:003399; 控制背景颜色,居中对齐*/ 
#nav {line-height: 33px; list-style-type: none; }         /*控制一级菜单行高；上边距5px；*/   
#nav a { display: block; width: 80px; text-align:center; font-size:14px; font:"宋体"; font-weight: bold;     margin-left:10px;} /*一级菜单链接总体样式：每个菜单的宽，居中对齐，文字大小*/ 
#nav a:link  {
color:#000;
text-decoration:none;
margin:0;

}     /* 未访问的链接 */   
#nav a:visited  {color:#000;text-decoration:none;margin:0;}    /* 已访问的颜色 */  
#nav a:hover {color:#fff;text-decoration:none;}                /* 鼠标在链接上 */
#nav li {float: left; margin-right:15px;}                   /* 一级菜左对齐 */ 
#nav li a:hover{background:url(images/1.jpg)}     /* 鼠标在一级菜单上改变其背景色 */ 

#nav li:hover ul {left: auto;}
#nav li.sfhover ul {left: auto;}
#content {clear: left;}
</style>

로그인 후 복사

--------- - -css 끝---------------

---------메뉴 내용------------

<div><div id=div_center>
                    <UL id=nav>
                      <LI><A href="index.asp">首页</A></LI>
    <LI><a href="about.asp">学校简介</a></LI>
    <LI><A href="js.asp">教师风采</A> </LI>
    <LI><A href="xs.asp">优秀学生</A> </LI>
    <LI><A href="zp.asp">作品展厅</A> </LI>
    <LI><A href="xc.asp">学校相册</A> </LI>
    <LI><A href="ly.asp">在线留言</A> </LI>
  </UL>
    </div></div>

로그인 후 복사

--- ----- ---메뉴 내용 끝---------

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>选项卡菜单</title>
<style type="text/css">
.bg{background:url(MenuLine.gif) repeat; height:30px; width:328px; line-height:30px}
ul{list-style-type:none; margin:0; padding:0; font-size:14px}
ul li{float:left; width:82px; text-align:center}
.mouseon{background:url(Menu.gif) no-repeat; font-weight:bold; color:#f00}
.mouseout{font-weight:normal}
#content0,#content1{width:326px!important; width:328px; height:200px; border:1px solid #dcefe1}
h2{margin:0; padding:0}
</style>
<script language="javascript">
function Tab(m,n)
{
    var menu=document.getElementById(&#39;menu&#39;+m).getElementsByTagName(&#39;li&#39;);
    var list=document.getElementById(&#39;content&#39;+m).getElementsByTagName(&#39;div&#39;);
    for(var i=0;i<menu.length;i++)
    {
        menu[i].className=i==n?"mouseon":"mouseout";
        list[i].style.display=i==n?"block":"none";
    }
}
</script>
<body>
<div id="menu0" class="bg">
    <ul>
        <li class="mouseon" onMouseOver="Tab(0,0)">选项1</li>
        <li class="mouseout" onMouseOver="Tab(0,1)">选项2</li>
        <li class="mouseout" onMouseOver="Tab(0,2)">选项3</li>
        <li class="mouseout" onMouseOver="Tab(0,3)">选项4</li>
    </ul>
</div>
<div id="content0">
    <div style="display:block">
        <h2>帝王槌</h2><br/>
        立剑赏月意惆怅,袖饰刀,衣披霜,傲视雾丸,徒手战扶桑.<br />
问津终寻帝王陵,黑影没,尸满岗,惟见逆鲮露寒光.　 <br />
须发苍,气轩昂,三尺银狼,破风动八方.　 <br />
依身紧握噬魂枪,饮虎血,豪万丈.惟有千年我故乡!
    </div>
    <div style="display:none">
        <h2>玉女枪法</h2><br/>
        曾经有个梦想：驰骋江湖，快意恩仇。<br />
曾经有份愿望：千里追凶，十步溅血。<br />
曾经有腔豪情：奇功盖世，名冠武林。<br />
曾经有种期盼：烛影摇红，衣袖添香。
    </div>
    <div style="display:none">
        <h2>黑沙刚体</h2><br/>
        赵客缦胡缨，吴钩霜雪明。银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。事了拂衣去，深藏身与名。 
闲过信陵饮，脱剑膝前横。将炙啖朱亥，持觞劝侯嬴。 
三杯吐然诺，五岳倒为轻。眼花耳热后，意气素霓生。
救赵挥金锤，邯郸先震惊。千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。谁能书阁下，白首太玄经。
    </div>
    <div style="display:none">
        <h2>不羁浪人枪</h2><br/>
        素手相牵，斜辉入眼帘，一轮逍遥自在间，醉了山水闲。<br />
沙漠绿水涟，鱼游浅底，明眸一水天。<br />
爱在村友相谈，开心点点，笑语连连，率性夜无眠。<br />
月在西边，风乱星寒，辗转醇香旧事，蛾儿曼舞灯前。
    </div>
</div>
<p>
<div id="menu1" class="bg">
    <ul>
        <li class="mouseon" onMouseOver="Tab(1,0)">选项5</li>
        <li class="mouseout" onMouseOver="Tab(1,1)">选项6</li>
        <li class="mouseout" onMouseOver="Tab(1,2)">选项7</li>
        <li class="mouseout" onMouseOver="Tab(1,3)">选项8</li>
    </ul>
</div>
<div id="content1">
    <div style="display:block">
        <h2>干将</h2><br/>    干将者，吴人也；莫邪，干将之妻也。干将作剑，金铁之精不流，于是干将夫妻，乃断发剪爪，投于炉中，金铁乃濡，遂以成剑，阳曰干将，阴曰莫邪。 
    </div>
    <div style="display:none">
        <h2>龙渊</h2><br/>        “何谓龙渊、太阿、工布？”答曰：“欲知龙渊，观其状，如登高山，临深渊；欲知太阿，观其（纹），巍巍翼翼，如流水之波；欲知工布，（纹）从文起，至脊而止，如珠不可衽，文若流水不绝。”
    </div>
    <div style="display:none">
        <h2>湛卢</h2><br/>
        欧冶子所铸五大名剑为三大二小。其大者有湛卢、纯钧、胜邪；其小者有鱼肠、世阙。
    </div>
    <div style="display:none">
        <h2>轩辕剑</h2><br/>
        轩辕采首山之铜，铸剑，以天之古字题名。
    </div>
</div>
</body>
</html>

로그인 후 복사

위 내용은 클릭 후 CSS 탐색 메뉴를 배경 이미지로 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7502

Cakephp 튜토리얼

1377

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

부트 스트랩 크기를 조정하는 방법 Apr 07, 2025 pm 03:18 PM

부트 스트랩에서 요소의 크기를 조정하려면 다음을 포함하여 차원 클래스를 사용할 수 있습니다.

부트 스트랩에 사진을 삽입하는 방법 Apr 07, 2025 pm 03:30 PM

Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.

부트 스트랩 버튼을 사용하는 방법 Apr 07, 2025 pm 03:09 PM

부트 스트랩 버튼을 사용하는 방법? 부트 스트랩 CSS를 소개하여 버튼 요소를 만들고 부트 스트랩 버튼 클래스를 추가하여 버튼 텍스트를 추가하십시오.

부트 스트랩을위한 프레임 워크를 설정하는 방법 Apr 07, 2025 pm 03:27 PM

부트 스트랩 프레임 워크를 설정하려면 다음 단계를 따라야합니다. 1. CDN을 통해 부트 스트랩 파일 참조; 2. 자신의 서버에서 파일을 다운로드하여 호스팅하십시오. 3. HTML에 부트 스트랩 파일을 포함; 4. 필요에 따라 Sass/Less를 컴파일하십시오. 5. 사용자 정의 파일을 가져옵니다 (선택 사항). 설정이 완료되면 Bootstrap의 그리드 시스템, 구성 요소 및 스타일을 사용하여 반응 형 웹 사이트 및 응용 프로그램을 만들 수 있습니다.

부트 스트랩에 분할 라인을 작성하는 방법 Apr 07, 2025 pm 03:12 PM

부트 스트랩 분할 라인을 만드는 두 가지 방법이 있습니다 : 태그를 사용하여 수평 분할 라인이 생성됩니다. CSS 테두리 속성을 사용하여 사용자 정의 스타일 분할 라인을 만듭니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

부트 스트랩 날짜를 보는 방법 Apr 07, 2025 pm 03:03 PM

답 : 부트 스트랩의 날짜 선택기 구성 요소를 사용하여 페이지에서 날짜를 볼 수 있습니다. 단계 : 부트 스트랩 프레임 워크를 소개하십시오. HTML에서 날짜 선택기 입력 상자를 만듭니다. 부트 스트랩은 선택기에 스타일을 자동으로 추가합니다. JavaScript를 사용하여 선택한 날짜를 얻으십시오.