Question

所以我创建了一个＆＃39;添加＆＃39;按钮这是一个简单的圆圈，在悬停时会打开一些可点击的选项（如图所示）。

悬停时

正常（不悬停）

当您单击其中一个周围元素时，它会隐藏除您单击的元素之外的所有其他元素，当您将鼠标悬停时，隐藏元素会再次显示。

我的问题是我想要点击其他3个div（＆＃34;区域1＆＃34;，＆＃34; zone2＆＃34;＆amp;＆＃34; zone3＆＃34;）使用JavaScript动态创建，并以与附加图像类似的样式定位在单击元素周围。

但我显然有找到位置然后在正确位置添加这3个新div的问题，具体取决于点击了哪个元素，以及它是在左下方还是顶部。

谢谢！

<head>
    <title>Add Button</title>
    <link href="css/materialdesignicons.min.css" media="all" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/style.css">  
</head>

<body>
    <header>
        <div class="add-button">
            <div class="sub-button tl" id="temp" onclick="addNew(this.id)"><i class="mdi mdi-temperature-celsius"></i></div>
            <div class="sub-button tr" id="light"><i class="mdi mdi-weather-sunny"></i></div>
            <div class="sub-button bl" id="fridge"><i class="mdi mdi-fridge"></i></div>
            <div class="sub-button br" id="kettle"><i class="mdi mdi-coffee"></i></div>
            <div class="sub-button tlo" id="cup"><i class="mdi mdi-cup"></i></div>
            <div class="sub-button tro" id="lamp"><i class="mdi mdi-lightbulb-outline"></i></div>
            <div class="sub-button bro" id="sound"><i class="mdi mdi-microphone-outline"></i></div>
            <div class="sub-button blo" id="noise"><i class="mdi mdi-speaker"></i></div>
        </div>
</header>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>


<script>
    var type;
    var elements = ["temp", "light", "fridge", "kettle", "cup", "lamp", "sound", "noise"];

    function addNew(id){
        type = id;
        for(i = 0; i < elements.length; i++){
            if(elements[i] != type){
                document.getElementById(elements[i]).style.display = "none"; 
            }
        }
        /*var div1 = document.createElement('div'); 
        div1.className = '';
        var elementStyle = document.getElementById("id").style;
        elementStyle.position = "relative";
        elementStyle.top = elementStyle.left = "50%";*/
    }

    function initialise(){
        for(i = 0; i < elements.length; i++){
            document.getElementById(elements[i]).style.display = "block"; 
        }
    }


    $(document).ready(function() {
        $('.add-button').hover(
           function () {
           }, 
           function () {
               initialise();
           }
        );
    });
</script>
</body>

Answer 1

var $existingDiv = $("#div1"),
    pos = $existingDiv.position(),
    $newDiv = $("<div></div>").css({
        "background-color": "red",
        "position": "absolute"
    });
$newDiv.css(pos);
$existingDiv.after($newDiv);
$existingDiv.remove();

http://jsfiddle.net/paska/uvxc1yk5/

使用position元素：http://jsfiddle.net/paska/uvxc1yk5/2/

获取指定div的位置，然后创建新div并将位置应用于它

1 个答案: