Html 如何在我的网页上单击其他地方时也不失去对某个元素的关注？

我试图为我的网页创建一个旋转菜单，但是当我旋转到第二页（例如）并且单击页面上的其他地方时，菜单会返回到其初始位置。 所以我的问题是：我怎么能点击其他东西而不返回到第一个位置

*{
保证金：0；
填充：0；
-webkit背面可见性：隐藏；
}
/*标题*/
.标题{
高度：25px；
背景：#222；
颜色：#eee；
文本对齐：居中；
字体：10px/25px Helvetica，Verdana，无衬线；
}
.标题a{
颜色：#999；
}
/*包装纸*/
.包装纸{
位置：相对位置；
溢出：隐藏；
保证金：20px自动；
宽度：370px；
}
.菜单a{
右边距：-4px；
填充：10px 30px；
宽度：50px；
颜色：#333；
文字装饰：无；
字体：15px/25px Helvetica，Arial，无衬线；
}
.菜单a：悬停{
背景：#eee；
}
/*内圈*/
.包装工：以前{
内容：“CCAVV”；
文本对齐：居中；
字体：30px/135px格鲁吉亚，时代，衬线；
颜色：#efefef；
位置：绝对位置；
顶部：140px；
左：110像素；
z指数：10；
宽度：130px；
高度：130像素；
边界半径：50%；
背景：#fff；
-webkit盒阴影：3px 3px 10px rgba（0,0,0,0.3）；
盒影：3px 3px 10px rgba（0,0,0,0.3）；
}
/*主圈*/
.圆圈{
位置：相对位置；
边缘顶部：30px；
边缘底部：20px；
左边距：25px；
宽度：300px；
高度：300px；
边界半径：50%；
背景：#093b62；
方框阴影：插入0px 0px 30px rgba（0,0,0,0.3）；
-webkit盒阴影：插入0px 0px 30px rgba（0,0,0,0.3）；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-ms过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}
/*小圈子*/
李先生{
位置：绝对位置；
宽度：50px；
高度：50px；
边界半径：50%；
背景：白色；
列表样式类型：无；
文本对齐：居中；
字体：20px/50px Helvetica，Arial，无衬线；
排名：0；
左：0；
}
.圈李：第n个孩子（1）{
顶部：15px；
左：125px；
}
.圈李：第n个孩子（2）{
顶部：125px；
左：235px；
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
-ms变换：旋转（90度）；
-o变换：旋转（90度）；
变换：旋转（90度）；
}
.圈李：第n个孩子（3）{
顶部：235px；
左：125px；
-webkit变换：旋转（180度）；
-moz变换：旋转（180度）；
-ms变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
}
.圈李：第n个孩子（4）{
顶部：125px；
左：15px；
-webkit变换：旋转（270度）；
-moz变换：旋转（270度）；
-ms变换：旋转（270度）；
-o变换：旋转（270度）；
变换：旋转（270度）；
}
/*悬停状态*/
.menu>.one:焦点~.圆圈{
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-ms变换：旋转（0度）；
-o变换：旋转（0度）；
变换：旋转（0度）；
}
.menu>.two:焦点~.circle{
-webkit变换：旋转（-90度）；
-moz变换：旋转（-90度）；
-ms变换：旋转（-90度）；
-o变换：旋转（-90度）；
变换：旋转（-90度）；
}
.menu>.three:焦点~.circle{
-webkit变换：旋转（-180度）；
-moz变换：旋转（-180度）；
-ms变换：旋转（-180度）；
-o变换：旋转（-180度）；
变换：旋转（-180度）；
}
.menu>.four:焦点~.圆圈{
-webkit变换：旋转（-270度）；
-moz变换：旋转（-270度）；
-ms变换：旋转（-270度）；
-o变换：旋转（-270度）；
变换：旋转（-270度）；
}

一,
二,
三,
四,

我不确定您是否可以使用纯CSS阻止

：focus

的默认行为。此外，我不确定使用

：focus

是否是实现您想要实现的目标的最佳方式

如果您愿意使用jQuery，那么这很容易实现。（如果您不想使用jQuery，使用纯JavaScript也可以很容易地做到这一点。如果是这样，请告诉我，我将编辑我的答案。）

在

中添加jQuery和JavaScript文件：

以下是HTML的

中引用的

foo.js

。使用jQuery，您无需使用

：focus

//wait for the document to load
$(function() {

    //when the user clicks "one" in the menu
    $('.menu>.one').click(function() {
        $('.circle').css({
            '-webkit-transform': 'rotate(0deg)',
            '-moz-transform': 'rotate(0deg)',
            '-ms-transform': 'rotate(0deg)',
            '-o-transform': 'rotate(0deg)',
            'transform': 'rotate(0deg)'
        });
    });

    //when the user clicks "two" in the menu
    $('.menu>.two').click(function() {
        $('.circle').css({
            '-webkit-transform': 'rotate(-90deg)',
            '-moz-transform': 'rotate(-90deg)',
            '-ms-transform': 'rotate(-90deg)',
            '-o-transform': 'rotate(-90deg)',
            'transform': 'rotate(-90deg)'
        });
    });

    //when the user clicks "three" in the menu
    $('.menu>.three').click(function() {
        $('.circle').css({
            '-webkit-transform': 'rotate(-180deg)',
            '-moz-transform': 'rotate(-180deg)',
            '-ms-transform': 'rotate(-180deg)',
            '-o-transform': 'rotate(-180deg)',
            'transform': 'rotate(-180deg)'
        });
    });

    //when the user clicks "four" in the menu
    $('.menu>.four').click(function() {
        $('.circle').css({
            '-webkit-transform': 'rotate(-270deg)',
            '-moz-transform': 'rotate(-270deg)',
            '-ms-transform': 'rotate(-270deg)',
            '-o-transform': 'rotate(-270deg)',
            'transform': 'rotate(-270deg)'
        });
    });

});

---

谢谢！我不知道如何使用jQuery，因为我对html/css编码还很陌生。。。但我会努力学习的！

* {
  margin: 0;
  padding: 0;
  -webkit-backface-visibility: hidden;
}

/*HEADER*/
  .header {
  height: 25px;
  background: #222;
  color: #eee;
  text-align: center;
  font: 10px/25px Helvetica, Verdana, sans-serif;
}

.header a {
  color: #999;
}

/*WRAPPER*/
.wrapper {
  position: relative;
  overflow: hidden;
  margin: 20px auto;
  width: 370px;
}

.menu a {
  margin-right: -4px;
  padding: 10px 30px;
  width: 50px;
  color: #333;
  text-decoration: none;
  font: 15px/25px Helvetica, Arial, sans-serif;
}

.menu a:hover {
  background: #eee;
}

/*INNER CIRCLE*/
.wrapper:before {
  content: "CCAVV";
  text-align: center;
  font: 30px/135px Georgia, Times, serif;
  color: #efefef;
  position: absolute;
  top: 140px;
  left: 110px;
  z-index: 10;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #fff;

  -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}

/*MAIN CIRCLE*/
.circle {
  position: relative;
  margin-top: 30px;
  margin-bottom: 20px;
  margin-left: 25px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #093b62;

  box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);

  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

/*LITTLE CIRCLES*/
.circle li {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: white;
  list-style-type: none;
  text-align: center;
  font: 20px/50px Helvetica, Arial, sans-serif;
  top: 0;
  left: 0;
}

.circle li:nth-child(1) {
  top: 15px;
  left: 125px;
}

.circle li:nth-child(2) {
  top: 125px;
  left: 235px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.circle li:nth-child(3) {
  top: 235px;
  left: 125px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.circle li:nth-child(4) {
  top: 125px;
  left: 15px;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

//wait for the document to load
$(function() {

    //when the user clicks "one" in the menu
    $('.menu>.one').click(function() {
        $('.circle').css({
            '-webkit-transform': 'rotate(0deg)',
            '-moz-transform': 'rotate(0deg)',
            '-ms-transform': 'rotate(0deg)',
            '-o-transform': 'rotate(0deg)',
            'transform': 'rotate(0deg)'
        });
    });

    //when the user clicks "two" in the menu
    $('.menu>.two').click(function() {
        $('.circle').css({
            '-webkit-transform': 'rotate(-90deg)',
            '-moz-transform': 'rotate(-90deg)',
            '-ms-transform': 'rotate(-90deg)',
            '-o-transform': 'rotate(-90deg)',
            'transform': 'rotate(-90deg)'
        });
    });

    //when the user clicks "three" in the menu
    $('.menu>.three').click(function() {
        $('.circle').css({
            '-webkit-transform': 'rotate(-180deg)',
            '-moz-transform': 'rotate(-180deg)',
            '-ms-transform': 'rotate(-180deg)',
            '-o-transform': 'rotate(-180deg)',
            'transform': 'rotate(-180deg)'
        });
    });

    //when the user clicks "four" in the menu
    $('.menu>.four').click(function() {
        $('.circle').css({
            '-webkit-transform': 'rotate(-270deg)',
            '-moz-transform': 'rotate(-270deg)',
            '-ms-transform': 'rotate(-270deg)',
            '-o-transform': 'rotate(-270deg)',
            'transform': 'rotate(-270deg)'
        });
    });

});