突出顯示與屏幕上的指導DIV內容

Question

我要以突出顯示箭頭，而使用顯示指令

這裏的屏幕指南定點元件的鏈接小提琴

Fiddle

一些從小提琴代碼是：

$("#overlay").on("click", function(){ 
    this.style.display = "none"; 
    $("#clk").show(); 
}); 

$("#clk").on("click", function(){ 
    $("#overlay").show(); 
    $("#clk").hide(); 
}); 

Answer 1

你需要調整一下你的風格來達到這個目的。

爲您的覆蓋範圍添加保證金div因此main可見。同樣，調整箭頭的位置和相應的文字，使其到達適當的位置。

請注意，如果該框在視覺上內部與carmin演示中一樣，此解決方案將無法正常工作。

updated jsFiddle

更新CSS：

*{ 
    margin: 0px; 
    padding: 0px; 
} 

#overlay{ 
    font-family: "Comic Sans MS", cursive, sans-serif; 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    margin-top: 120px; 
    z-index: 999999; 
    background-color: #000; 
    opacity:0.5; 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -ms-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
} 

#overlay p, #overlay img{ 
    position: relative; 
} 

#overlay p{ 
    color: blue; 
} 

#instruction1{ 
    top: 50px; 
    left: 400px; 
} 

#arrow1{ 
    width: 100px; 
    position: relative; 
    top: -30px; 
    left: 150px; 
} 

#instruction2{ 
    top: -10px; 
    left: 225px; 
} 

#dismiss{ 
    font-size: 12px; 
} 
.shome{ 
    display: block; 
} 
main{ 
    z-index: 0; 
} 

main div{ 
    padding: 50px; 
    background: rgb(0,120,170);color:#fff; 
    z-index: 9999999; 
    opacity: 0.8; 
} 

Answer 2

希望這是你想要的。我已從覆蓋區塊刪除this.style.display = "none";。現在它正在工作。

$("#overlay").on("click",function(){ 
    $("#clk").show(); 
    // $("#overlay").hide(); //Add this line if you need same behaviour while click on overlay. 
}); 

$("#clk").on("click", function(){ 
    $("#overlay").show(); 
    $("#clk").hide(); 
}); 

Answer 3

動畫鼠標所在的元素可以通過例如使用.hover從jQuery的：

$("#maincont").hover( 
    function() {  
     $(this).addClass("hover"); 
    }, 
    function() {  
     $(this).removeClass("hover"); } 
); 

雖然此刻你覆蓋DIV防止觸發器觸發，因爲maincont是「背後」的覆蓋。 可能需要重新考慮設計。

編輯： 也許這是一個更好的方法來實現某種「在鼠標位置」工具提示模式，它可以激活並顯示信息在鼠標附近的信息股利。 改變mousecursor到

cursor: help; 

CSS屬性將附加有助於區別這兩種模式

Answer 4

Didn`t明白沒有ü意味着之間。 也許你只是需要糾正你的風格，就像這樣fiddle

Answer 5

我添加了一個類煥發你的股利和添加相同的點擊移除時覆蓋相同。

$("#overlay").on("click", function(){ 
 
    this.style.display = "none"; 
 
    $("#clk").show(); 
 
    $("#maincont").removeClass("glow"); 
 
}); 
 

 
$("#clk").on("click", function(){ 
 
    $("#overlay").show(); 
 
    $("#maincont").addClass("glow"); 
 
    $("#clk").hide(); 
 
});

*{ 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#overlay{ 
 
    font-family: "Comic Sans MS", cursive, sans-serif; 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
    background-color: #000; 
 
    opacity:0.5; 
 
-webkit-transition: all 0.3s ease-out; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -ms-transition: all 0.3s ease-out; 
 
    -o-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
} 
 

 
#overlay p, #overlay img{ 
 
    position: relative; 
 
} 
 

 
#overlay p{ 
 
    color: blue; 
 
} 
 

 
#instruction1{ 
 
    top: 50px; 
 
    left: 400px; 
 
} 
 

 
#arrow1{ 
 
    width: 100px; 
 
    position: relative; 
 
    top: 100px; 
 
    left: 150px; 
 
} 
 

 
#instruction2{ 
 
    top: 100px; 
 
    left: 225px; 
 
} 
 

 
#dismiss{ 
 
    font-size: 12px; 
 
} 
 
.shome{ 
 
    display: block; 
 
} 
 
main{ 
 
    z-index: 0; 
 
} 
 

 
main div{ 
 
    padding: 50px; 
 
    background: rgb(0,120,170);color:#fff; 
 
    z-index: 1; 
 
    opacity: 0.8; 
 
} 
 
.glow{ 
 
    opacity: 1; 
 
    z-index: 2; 
 
    color: white; 
 
    position: relative; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="overlay" style="display:none"> 
 
    <p id="instruction1">This is some instruction.<br/> 
 
    <span id="dismiss">(tap to dismiss)</span> 
 
    </p> 
 
    <img id="arrow1" src="http://pixabay.com/static/uploads/photo/2013/07/13/10/13/arrow-156792_640.png" /> 
 
    <p id="instruction2">This is something cool!</p> 
 
</div> 
 

 
<main> 
 
    <div id="maincont">This is my main content.</div> 
 
</main> 
 

 
<br/> 
 
    <div style="cursor:pointer;background:rgb(0,120,190);color:#fff;padding:10px;width:25%;text-align:center" id="clk">Click to see Instructions.</div>

PS。您的箭頭圖片在此片段中被阻止對不起