使用屏幕指南高亮显示DIV内容 [英] Highlight the DIV content with onscreen guide

问题描述

我想突出显示箭头指向的元素，同时使用屏幕指南显示说明

I want to highlight element on which arrow is pointing while using the onscreen guide for displaying instructions

这里是小提琴的链接

小提琴

一些来自fiddle的代码是：

Some of code from fiddle is:

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

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

推荐答案

您需要调整样式

为您的重叠 div 添加边距，因此主是可见的。同样，调整箭头的位置和相应的文本，以使它到一个合适的位置。

Add margin to your overlay div so the main is visible. Likewise, adjust the position of the arrow and the corresponding text to get it to an appropriate position.

注意，如果盒子在视觉上

Note that this solution wont work if the box is visually inside as in the carmin demo.

jsfiddle.net/2e0dww6k/3/rel =nofollow> updated jsFiddle

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;
}

这篇关于使用屏幕指南高亮显示DIV内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！