堆棧內存溢出
  簡體   English   中英

當您單擊或停止使用Javascript進行鼠標懸停時，如何使CSS on-hover內容保持不變？

[英]How can you make CSS on-hover content stay in place when you click or stop hovering using Javascript?

 原文  2012-12-01 07:50:53  8   5    javascript/ css/ onclick/ hover/ mouseevent

問題描述

我有一個我想實現的身體系統功能。 當用戶將鼠標懸停在身體​​部位上時，它會突出顯示該特定身體部位的信息。 我已經按照我想要的方式對CSS進行了編碼，但是當我點擊正文部分或鼠標離開懸停狀態時， 我對JavaScript沒有任何了解 。

我搜索了論壇，發現了類似的問題，花了好幾個小時試圖從別人的javascript解決方案中解決這個問題 - 我正處於需要求助的地步。

這是我用我想要的效果制作的flash原型：

http://inwavemedia.com/temp/proto/Main.html

如果您想查看我現在擁有的內容，這是實時HTML：

http://inwavemedia.com/temp/excretory.html

這是我的代碼： 

<style type="text/css">
#bodysystem-excretory {
 width: 618px;
 height: 504px;
 background: url(excretory.png) no-repeat;
 margin: 10px auto; padding: 0;
 position: relative;
 border: 1px solid #999;
}
#bodysystem-excretory li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
    position: absolute;
}

#bodysystem-excretory a {
    display: block;
/*  text-indent: -9999px;*/
    text-decoration: none;
}

#esoph {
    left: 85px;
    top: 41px;
    width: 46px;
    height: 94px;
    z-index: 10;
}

#lungs {
    left: 76px;
    top: 84px;
    width: 84px;
    height: 68px;
    z-index: 20;
}

#bladder {
    left: 87px;
    top: 148px;
    width: 64px;
    height: 104px;
    z-index: 30;
}

#esoph a {
    height: 94px;
}

#lungs a {
    height: 67px;
}

#bladder a {
    height: 104px;
}


#esoph a:hover {
    background-image: url(excretory.png);
    background-repeat: no-repeat;
    background-position: -25px -561px;
}

#lungs a:hover {
    background-image: url(excretory.png);
    background-repeat: no-repeat;
    background-position: -105px -523px;
}

#bladder a:hover {
    background-image: url(excretory.png);
    background-repeat: no-repeat;
    background-position: -114px -618px;
}

.info span{ 
    display: none

}

.info{
    position:relative;
    z-index:1124;
    color:#000;
}

.info:hover{
    z-index:1125;

}

.info:hover span{
    display:block;
    position:absolute;
    top:-30px;
    left:155px;
    width:370px;
    color:#000;
    background-color:#FFFFFF;
}
</style>

</head>

<body>
<ul id="bodysystem-excretory">
  <li id="esoph">
    <a href="#" class="info"><span id="esoph-info"><h3>Esophagus</h3><p>This is esophagus information. This is esophagus information. This is esophagus information. This is esophagus information. This is esophagus information. This is esophagus information. This is esophagus information. </p></span></a>
  </li>
<li id="lungs"><a href="#" class="info"><span id="lungs-info"><h3>Lungs</h3></span></a></li>
<li id="bladder"><a href="#" class="info"><span id="bladder-info"><h3>Bladder</h3></span></a></li>
</ul>

5 個解決方案

解決方案1
 1  2012-12-01 09:39:57

以下是您需要做的所需更改： 

<head>
    <title>Untitled Page</title>
    <style type="text/css">
        #bodysystem-excretory
        {
            width: 618px;
            height: 504px;
            background: url(excretory.png) no-repeat;
            margin: 10px auto;
            padding: 0;
            position: relative;
            border: 1px solid #999;
        }
        #bodysystem-excretory li
        {
            margin: 0;
            padding: 0;
            list-style: none;
            display: block;
            position: absolute;
        }

        #bodysystem-excretory a
        {
            display: block; /*  text-indent: -9999px;*/
            text-decoration: none;
        }

        #esoph
        {
            left: 85px;
            top: 41px;
            width: 46px;
            height: 94px;
            z-index: 10;
        }

        #lungs
        {
            left: 76px;
            top: 84px;
            width: 84px;
            height: 68px;
            z-index: 20;
        }

        #bladder
        {
            left: 87px;
            top: 148px;
            width: 64px;
            height: 104px;
            z-index: 30;
        }

        #esoph a
        {
            height: 94px;
        }

        #lungs a
        {
            height: 67px;
        }

        #bladder a
        {
            height: 104px;
        }


        #esoph a:hover
        {
            background-image: url(excretory.png);
            background-repeat: no-repeat;
            background-position: -25px -561px;
        }

        #lungs a:hover
        {
            background-image: url(excretory.png);
            background-repeat: no-repeat;
            background-position: -105px -523px;
        }

        #bladder a:hover
        {
            background-image: url(excretory.png);
            background-repeat: no-repeat;
            background-position: -114px -618px;
        }

        .info span
        {
            display: none;
        }

        .info
        {
            position: relative;
            z-index: 1000;
            color: #000;
        }

        #bodysystem-excretory li[selected='true'] .info
        {
            z-index:1200;
        }

        #bodysystem-excretory li[selected='true'] .info span
        {
            display: block;
            position: absolute;
            top: -30px;
            left: 155px;
            width: 370px;
            color: #000;
            background-color: #FFFFFF;
        }

        .info:hover
        {
            z-index: 1125;
        }

        .info:hover span
        {
            display: block;
            position: absolute;
            top: -30px;
            left: 155px;
            width: 370px;
            color: #000;
            background-color: #FFFFFF;
        }
    </style>
    <script type="text/javascript">
        function SelectOrgan(obj)
        {
            var parentObj = obj.parentNode;
            var organs = document.getElementById("bodysystem-excretory").getElementsByTagName("li");

            for (var i = 0, len = organs.length; i < len; i++)
            {
                organs[i].setAttribute("selected", "false");
            }

            parentObj.setAttribute("selected", "true");
        }
    </script>
</head>
<body>
    <ul id="bodysystem-excretory">
        <li id="esoph" selected="false"><a href="#" class="info" onclick="SelectOrgan(this)"><span id="esoph-info">
            <h3>
                Esophagus</h3>
            <p>
                This is esophagus information. This is esophagus information. This is esophagus
                information. This is esophagus information. This is esophagus information. This
                is esophagus information. This is esophagus information.
            </p>
        </span></a></li>
        <li id="lungs" selected="false"><a href="#" class="info" onclick="SelectOrgan(this)"><span id="lungs-info">
            <h3>
                Lungs</h3>
        </span></a></li>
        <li id="bladder" selected="false"><a href="#" class="info" onclick="SelectOrgan(this)"><span id="bladder-info">
            <h3>
                Bladder</h3>
        </span></a></li>
    </ul>
</body>
</html>

注意，每個器官都被分配了一個絕對位置，在該空間中具有不同的位置。 如果你保持所有這些都具有相同的左，頂部，寬度和高度，那么你將達到你所需要的。

解決方案2
 1  2012-12-01 18:08:09

我認為以前的答案都不符合您的要求。 這是我的建議 。 請注意，CSS會被更改，並且最后會添加javascript。 

<html>
<head><style type="text/css">
#bodysystem-excretory {
     width: 618px; height: 504px;
     background: url("excretory.png") no-repeat;
     margin: 10px auto; padding: 0;
     position: relative;
     border: 1px solid #999;
}
#bodysystem-excretory li {
    margin: 0; padding: 0;
    list-style: none;
    display: block;
    position: absolute;
}
#bodysystem-excretory a {
    display: block;
    /*  text-indent: -9999px;*/
    text-decoration: none;
}
#esoph {
    left: 85px; top: 41px;
    width: 46px; height: 94px;
    z-index: 10;
}
#lungs {
    left: 76px; top: 84px;
    width: 84px; height: 68px;
    z-index: 20;
}
#bladder {
    left: 87px; top: 148px;
    width: 64px; height: 104px;
    z-index: 30;
}
#esoph a {
    height: 94px;
}
#lungs a {
    height: 67px;
}
#bladder a {
    height: 104px;
}
#esoph:hover, #esoph.selected {
    background-image: url("excretory.png") no-repeat -25px -561px;
}
#lungs:hover, #lungs.selected {
    background-image: url("excretory.png") no-repeat -105px -523px;
}
#bladder:hover, #bladder.selected {
    background-image: url("excretory.png") no-repeat -114px -618px;
}
.info span{ 
    display: none
}
.info{
    position:relative;
    z-index:1124;
    color:#000;
}
.selected .info{
    z-index:1125;
}
.selected .info span {
    display:block; position:absolute;
    top:-30px; left:155px;
    width:370px;
    color:#000; background-color:#FFFFFF;
}​</style></head>
<body>
<ul id="bodysystem-excretory">
<li id="esoph">
<a href="#" class="info">
<span id="esoph-info"><h3>Esophagus</h3>
<p>
This is esophagus information. This is esophagus information. 
This is esophagus information. This is esophagus information.
This is esophagus information. This is esophagus information.
This is esophagus information. </p></span></a>
</li>
<li id="lungs"><a href="#" class="info">
<span id="lungs-info"><h3>Lungs</h3></span></a>        
</li>
<li id="bladder"><a href="#" class="info">
<span id="bladder-info"><h3>Bladder</h3>
</span></a></li>
</ul>​<script type="text/javascript">
// Get the <li> elements as a list called 'parts'
var parts = 
    document.getElementById('bodysystem-excretory').getElementsByTagName('li');
function getClickFunction(part) {
    return function() {
// This is the function that will be called when one of the <li>s is clicked
        if (part.className == 'selected') {    // if the body part is already selected
            part.className = '';               // ... then deselect it
        }
        else {                                 // otherwise,
            // first deselect all of the body parts
            for (var i = 0; i < parts.length; i++) {
                parts[i].className = '';
            }
            // then select the one that's been clicked
            part.className = 'selected';
        }
    }
}
// Now, attach this function to all of the <li> elements representing body parts      
for (var i = 0; i < parts.length; i++) {
    parts[i].onclick = getClickFunction(parts[i]);
}​
</script></body></html>

解決方案3
 0  2012-12-01 08:59:53

您可以添加一個查看我們點擊的內容的點擊事件，然后在點擊時永久更改樣式。 然后，這將永久地“揭示”新部件。

你的HTML： 

<li id="lungs" onclick="highlight(this.id)">
   <!--some stuff-->
</li>

在javascript中（為了簡單起見，我將它放入<script>標簽中，只需將此+其他案例添加到您的標題中）： 

 <script> 
   function highlight(id) {
       var part = document.getElementById(id);
       switch(id){
          case "lungs":
             part.style.backgroundImage="url(excretory.png)";
             part.style.backgroundRepeat="no-repeat";
             part.style.backgroundPosition="-105px 523px";
             break;
          //rinse repeat for all cases, don't forget the : after your case and to add break; at the end of each line
          default:
             //do nothing, or something, whatever
    }
 </script>

您可以在此處了解有關javascript switch語句的更多信息。

解決方案4
 0  2012-12-02 10:41:51

我認為最優雅的方法是每個器官都有兩個背景圖像， [organ].png和[organ]_hover.png 。 然后通過對所有器官應用相同的類（如.organ ），為所有器官創建一個懸停事件;

此時，你可以使用JQuery的.css()函數來改變特定器官的背景（通過使用$(this).attr("id")獲得它后，通過添加_hover后綴）。

您還應該保留當前器官的記錄，因此每當用戶將鼠標懸停在新器官上時，您將之前器官的背景更改回[organ].png ，然后將新器官保存為當前器官。

至於信息，只需使用你已經提取的器官名稱來display:block; ，和前一個display:none;

編輯：這是一個演示核心功能的小提琴

HTML： 

   <div id="human_body">
            <div class="organ" id="lungs"></div>
            <div class="organ" id="liver"></div>
            <div class="organ" id="pancreas"></div>
            <div class="organ" id="heart"></div>
            <div class="organ" id="kidneys"></div>
        </div>        
        <div id="info">
            <div id="lungs_info">
                Lungs
            </div>
            <div id="pancreas_info">
                Pancreas
            </div>
            <div id="liver_info">
                Liver
            </div>
            <div id="heart_info">
                Heart
            </div>
            <div id="kidneys_info">
                Kidneys
            </div>
        </div>

CSS： 

.organ {
width:40px;
    height:40px;
    margin:10px;
}

#lungs {
        background:url("http://www.fishweb.co.il/organs/lungs.png");
    }
    #heart {
        background:url("http://www.fishweb.co.il/organs/heart.png");
    }
    #pancreas {
        background:url("http://www.fishweb.co.il/organs/pancreas.png");
    }
    #kidneys {
        background:url("http://www.fishweb.co.il/organs/kidneys.png");
    }
    #liver {
        background:url("http://www.fishweb.co.il/organs/liver.png");
}

#info>div {
display:none;
}

JS（JQuery）： 

var current='';
$(".organ").mouseover(
 function(){
     if (current!='') {
         $("#" + current).css("background","url(http://www.fishweb.co.il/organs/" + current +".png)"); // remove the highlight from the prev organ
         $("#" + current + "_info").hide();
     }
     current = $(this).attr("id");
     $(this).css("background","url(http://www.fishweb.co.il/organs/" + current +"_hover.png)"); // highlight the current organ
     $("#" + current + "_info").show();
 }
    );​

解決方案5
 0  2012-12-06 08:51:41

您需要在鏈接和容器上創建一組簡單的標識符，這些標識符彼此對應。

JSFiddle： http ： //jsfiddle.net/Y4Wtn 

<style>
    .btn {font-weight:normal}
    .btn.active {font-weight:bold;}
    .pane {display:none;border:1px #ccc solid;padding:10px;}
    .pane.active {display:block;}
</style>
<script>
// insert jquery here
$(document).read(function(){

    $('.btn').click(function(){
        // grab the rel value of the the link that was clicked
        var thisRel = $(this).attr('rel');
        // remove active class from all .btn
        $('.btn').removeClass('active');
        // add active class to link that was clicked
        $(this).addClass('active');
        // remove all active classes from .pane
        $('.pane').removeClass('active');
        // add class active to pane with the same rel value clicked link
        $('.pane[rel="'+thisRel+'"]').addClass('active');         
    });

});
</script>
<ul>
    <li><a href="#1" class="btn active" rel="1">Item One</a></li>
    <li><a href="#2" class="btn" rel="2">Item Two</a></li>
    <li><a href="#3" class="btn" rel="3">Item Three</a></li>
</ul>

<div class="pane active" rel="1">Pane One</div>
<div class="pane" rel="2">Pane Two</div>
<div class="pane" rel="3">Pane Three</div>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 單擊圖像上的CSS on-hover內容 在懸停時如何更改CSS中的內容？ 您可以懸停並單擊的Javascript / CSS工具提示 如何強制 animation 完成然后反轉以在 hover 上啟動，即使中途停止懸停？ 如何放置圖片並使用Javascript移動圖片？ 使用JavaScript / JQuery，您能否在點擊代碼觸發時建立鏈接 當您將鼠標懸停時如何將類添加到元素，但是當您離開鼠標時該類將停留 除了使用javascript / jquery / css懸停的鏈接之外，如何為所有鏈接創建懸停效果？ 單擊鏈接時如何停止動畫？ 如何單擊一個按鈕並再次單擊它以關閉所有內容以及如何在 go 使用 HTML CSS 或 JS 進入暗模式時更改圖像？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM