Question

    <style type="text/css">
    .main {
        position: absolute;
        border-radius: 8px;
        border: none;
        height: 54%;
        top: 35%;
        /*33%*/
        color: #FFFFFF;
        font-size: 0.7em;
        overflow: hidden;
        z-index: 50;

    }
    .test1 {
        display: inline-block;
        height: 100%;
        width: 100%;

    }
    .test2 {
        display: inline-block;
        height: 100%;
        width: 100%;
    }
    .main:focus {
        z-index: 55;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        outline: none;
        top: 20%;
    }

</style>
<div>
    <!--other element-->
    <div class="main" tabindex="0">
        <div class="test1">
            <!--other element-->
        </div>
        <div class="test2">
            <div class="abc">
                <!--other element-->
            </div>
            <div class="abc">
                <!--other element-->
            </div>
        </div>
    </div>
</div>



    .main {
            position: absolute;
            border-radius: 8px;
            border: none;
            height: 54%;
            top: 35%;
            /*33%*/
           
           
            z-index: 50;

        }
        .test1 {
            /*display: inline-block;*/
            height: 100%;
            width: 100%;
                   
        }
        .test2 {
          /*display: inline-block;*/
            height: 100%;
            width: 100%;
        }
        .main:focus {
            z-index: 55;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            outline: none;
            top: 20%;
            background-color: red;
        }
    <div>
        <!--other element-->
        <div class="main" tabindex="0">
            <div class="test1">
                <span>Info2</span>
            </div>
            <div class="test2">
                <div class="abc">
                    <!--other element-->
                    <span>Info2</span>
                </div>
                <div class="abc">
                    <span> information</span>
                </div>
            </div>
        </div>
    </div>

此代码适用于chrome和Edge但不是IE 11。如果我们点击.main div边界，如果我们点击子元素然后它就会停止工作。

我也发现了一些有用的链接 https://davidwalsh.name/tabindex-focus这为我提供了将tabindex添加到元素的输入。

Answer 1

如果要在单击.main容器时聚焦主容器，则必须删除test1＆amp;的宽度和高度。 test2类。风格就像，

.main {
            position: absolute;
            border-radius: 8px;
            border: none;
            height: 54%;
            top: 35%;
            /*33%*/


            z-index: 50;

        }
        .test1 {
            /*display: inline-block;*/

        }
        .test2 {
          /*display: inline-block;*/
        }
        .main:focus {
            z-index: 55;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            outline: none;
            top: 20%;
            background-color: red;
        }

或者，如果您想为.test1 / .test2类提供焦点，请使用下面的代码

.main .test1:focus {
........
}

css焦点不在ie11工作

1 个答案: