在同一嵌套选择器中获取当前的悬停/鼠标悬停元素

Question

我正在尝试使用嵌套选择器选择当前悬停元素。我将“ .frmElement”类作为选择器。当我在第n级的“ .frmElement”元素上单击鼠标时，所有先前的选择器元素都将显示悬停效果，但是我只想在悬停的选择器上显示悬停效果

这是选择器的样子。

|- .frmElement 
 |-|- .frmElement 
 |-|-|- .frmElement 
 |-|-|-|- .frmElement 
 |-|-|-|- .frmElement:hover  
 |-|-|-|- .frmElement 
 |-|-|- .frmElement

我使用jquery mouseover事件向其中添加一个类，但是它将添加到所有父类中，例如。使用“活动”类显示悬停效果，但“活动”类已添加到所有父级，因此看起来像

|- .frmElement.active
 |-|- .frmElement.active 
 |-|-|- .frmElement.active 
 |-|-|-|- .frmElement 
 |-|-|-|- .frmElement:hover.active  
 |-|-|-|- .frmElement 
 |-|-|- .frmElement

但是我想将此类仅添加到当前具有鼠标指针的选择器元素中。

|- .frmElement
 |-|- .frmElement
 |-|-|- .frmElement 
 |-|-|-|- .frmElement 
 |-|-|-|- .frmElement:hover.active <--- I want this to be done 
 |-|-|-|- .frmElement 
 |-|-|- .frmElement

这是我使用806

的实际html，css和jQuery

这是html的代码

    <div _ngcontent-c2="" class="container" dragula="COPYABLE" id="right" ng-reflect-dragula="COPYABLE">
  <div _ngcontent-c2="" class="tabContainer frmElement" id="Tabbox-1">
    <div class="btns">
      <span>
          <button type="button" class="edit"><i class="fas fa-pencil-alt"></i></button>
          <button type="button" class="clone" id="clone_0.8406219829777923"><i class="far fa-clone"></i></button>
          <button type="button" class="remove" id="remove_0.8406219829777923"><i class="far fa-trash-alt"></i></button>
        </span>
    </div>

    <div class="containerFraim tabs">
      <!-- https://codepen.io/WebCamayoc/pen/nLhAa -->
      <div id="tabs">
        <!--Pestaña 1 activa por defecto-->
        <input id="tab-1" type="radio" name="tab-group" checked="checked">
        <label for="tab-1">Tab 1</label>
        <!--Pestaña 2 inactiva por defecto-->
        <input id="tab-2" type="radio" name="tab-group">
        <label for="tab-2">Tab 2</label>
        <!--Contenido a mostrar/ocultar-->
        <div id="content-block">
          <!--Contenido de la Pestaña 1-->
          <div id="content-1">
            <div class="container dropable" dragula="COPYABLE" id="tabContainer0">
              <div _ngcontent-c2="" class="Containerbox frmElement" id="Containerbox-2">
                <div class="btns">
                  <span>
                      <button type="button" class="edit"><i class="fas fa-pencil-alt"></i></button>
                      <button type="button" class="clone" id="clone_0.9341944397820223"><i class="far fa-clone"></i></button>
                      <button type="button" class="remove" id="remove_0.9341944397820223"><i class="far fa-trash-alt"></i></button>
                    </span>
                </div>
                <div class="containerFraim">
                  <div class="header"> Panel </div>
                  <div class="container dropable" dragula="COPYABLE" id="Containerbox2">
                    <div _ngcontent-c2="" class="Framebox frmElement" id="Framebox-3">
                      <div class="btns">
                        <span>
          <button type="button" class="edit"><i class="fas fa-pencil-alt"></i></button>
          <button type="button" class="clone" id="clone_0.6287785288366226"><i class="far fa-clone"></i></button>
          <button type="button" class="remove" id="remove_0.6287785288366226"><i class="far fa-trash-alt"></i></button>
        </span>
                      </div>

                      <div class="container dropable frameBorder" dragula="COPYABLE" id="Framebox3">
                        <div _ngcontent-c2="" class="Containerbox frmElement" id="Containerbox-4">
                          <div class="btns">
                            <span>
                              <button type="button" class="edit"><i class="fas fa-pencil-alt"></i></button>
                              <button type="button" class="clone" id="clone_0.2787709275968595"><i class="far fa-clone"></i></button>
                              <button type="button" class="remove" id="remove_0.2787709275968595"><i class="far fa-trash-alt"></i></button>
                            </span>
                          </div>
                          <div class="containerFraim">
                            <div class="header"> Panel </div>
                            <div class="container dropable" dragula="COPYABLE" id="Containerbox4">
                              <div _ngcontent-c2="" class="rediobox frmElement" id="rediobox-5">
                                <div class="btns">
                                  <span>
          <button type="button" class="edit"><i class="fas fa-pencil-alt"></i></button>
          <button type="button" class="clone" id="clone_0.166250324410125"><i class="far fa-clone"></i></button>
          <button type="button" class="remove" id="remove_0.166250324410125"><i class="far fa-trash-alt"></i></button>
        </span>
                                </div>
                                <label> Radio Options </label>
                                <label><input name="rediobox" disabled="true" type="radio" id="rediobox"> rediobox</label>
                                <label><input name="rediobox" disabled="true" type="radio" id="rediobox-1"> rediobox-1</label>
                              </div>
                            </div>
                          </div>

                        </div>
                        <div _ngcontent-c2="" class="selectbox frmElement" id="selectbox-6">
                          <div class="btns">
                            <span>
                              <button type="button" class="edit"><i class="fas fa-pencil-alt"></i></button>
                              <button type="button" class="clone" id="clone_0.9360886227539027"><i class="far fa-clone"></i></button>
                              <button type="button" class="remove" id="remove_0.9360886227539027"><i class="far fa-trash-alt"></i></button>
                            </span>
                          </div>
                          <label> Select Box</label><select id="selectbox" disabled="true"><option>Select</option></select>
                        </div>
                      </div>

                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
          <!--Contenido de la Pestaña 2-->
          <div id="content-2">
            <div class="container dropable" dragula="COPYABLE" id="tabContainer1"></div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

我试图在鼠标悬停时获取元素ID，但这为我提供了所有父元素的ID

JS代码：

$(document).on("mouseover", '.frmElement', function(e) {
  console.log($(".frmElement:first").index(this));
  console.log($(".frmElement:first", this).attr('class'));
  //e.stopPropagation();
  //console.log(e);
  // console.log($(".frmElement:first", this).attr('id')) ;
  /* var len = $(".frmElement").filter(function(i, el) {
    console.log(i);
    console.log(el);
    console.log($(el).attr('id'));
    return $(el);

    // var id = '#'+$(el).attr('id');
    // $(id).addClass('active');
  }); */
  /* console.log('---------');
  console.log(len); */
  // console.log($(this).html()); // jQuery equivalent to this.innerHTML
});

CSS：

.dropable {
  border: 1px dashed #000;
  min-height: 80px;
}

.frmElement {
  margin: 2px 0 10px 2px;
  /* padding: 10px; */
  border-radius: 5px;
  /* border: 1px solid #c1c1c1; */
  background: #fbfbfb;
  position: relative;
}

input[type=text],
input[type=number],
select,
textarea {
  background: #f1f1f1;
}

.containerFraim div.header {
  background: #eaeaea !important;
  padding: 10px;
  border-radius: 5px 5px 0 0;
  border: 1px solid #d6d6d6;
}

/* Tabs */

#tabs>input {
  height: 2.5em;
  visibility: hidden;
  width: 1px;
}

#tabs>label {
  background: #f9f9f9;
  /* Fondo de las pestañas */
  border-radius: .25em .25em 0 0;
  color: #888;
  /* Color del texto de las pestañas */
  cursor: pointer;
  display: inline-block;
  float: left;
  font-size: 1em;
  /* Tamaño del texto de las pestañas */
  height: 2.5em;
  line-height: 2.5em;
  margin-right: .25em;
  padding: 0 1.5em;
  text-align: center;
}

#tabs input:hover+label {
  background: #ddd;
  /* Fondo de las pestañas al pasar el cursor por encima */
  color: #666;
  /* Color del texto de las pestañas al pasar el cursor por encima */
}

#tabs input:checked+label {
  background: #f1f1f1;
  /* Fondo de las pestañas al presionar */
  color: #444;
  /* Color de las pestañas al presionar */
  position: relative;
  z-index: 6;
  /*
    -webkit-transition: .1s;
    -moz-transition: .1s;
    -o-transition: .1s;
    -ms-transition: .1s;
    */
}

#content-block {
  background: #f1f1f1;
  /* Fondo del contenido */
  border-radius: 0 .25em .25em .25em;
  min-height: 10em;
  /* Alto del contenido */
  /* position: relative; */
  width: 100%;
  /* z-index: 5; */
  border: 1px solid #e2e2e2;
}

#content-block>div {
  /* opacity: 0; */
  display: none;
  padding: .5em;
  /* position: absolute; */
  /* z-index: -100; */
  width: 100%;
  /*
    transition: all linear 0.1s;
    */
}

#tabs input#tab-1:checked~#content-block #content-1,
#tabs input#tab-2:checked~#content-block #content-2,
#tabs input#tab-3:checked~#content-block #content-3 {
  /* opacity: 1; */
  display: block;
  /* z-index: 100; */
}

/* TAB end */

.btns {
  position: absolute;
  right: 5px;
  cursor: pointer;
  border: 0px solid #ccc;
  background: #0077ff !important;
  color: #fff;
  padding: 5px;
  z-index: 100;
  display: none;
}

.frmElement:hover {
  border: 1px solid #008eff !important;
  box-shadow: 0 0 10px 0px #90ecff inset;
}

/* .frmGen .frmElement:hover div.btns{ */

.frmElement:hover+.btns {
  display: block;
}

Answer 1

您正在违背浏览器对“悬停”的定义。浏览器通常认为对孩子的盘旋也与对父母的盘旋一样。

您可以使用自定义mouseover + mouseout并调用event.stopPropagation来避免这种情况，以避免与父元素进行交互。这不是本地浏览器事件，因此没有像:hover这样的伪类；相反，我们将添加/删除自定义CSS类.hovered。

Array.from(document.getElementsByClassName('hoverable')).forEach(hoverable => {
  hoverable.addEventListener('mouseover', evt => {
    hoverable.classList.add('hovered');
    evt.stopPropagation();
  });
  hoverable.addEventListener('mouseout', evt => {
    hoverable.classList.remove('hovered');
    evt.stopPropagation();
  });
});

.hoverable {
  position: relative;
  min-width: 100px; min-height: 100px;
  padding: 30px;
  outline: 1px solid #ffffff;
  background-color: #c00000;
}
.hoverable.hovered {
  background-color: #ff0000;
}

<div class="hoverable h1">
  <div class="hoverable h2">
    <div class="hoverable h3">
      <div class="hoverable h4">
        <div class="hoverable h5">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

event.stopPropagation()防止事件冒泡。因此，将鼠标悬停在子元素/嵌套元素上不会引起连锁反应，也不会阻止将父元素分类为悬停，从而仅将当前元素作为目标。

$('.frmElement').on('mouseover', function(e){ 
  $(this).addClass('hover'); 
  e.stopPropagation(); 
})

$('.frmElement').on('mouseout', function(){ 
  $(this).removeClass('hover') 
 })

.dropable {
  border: 1px dashed #000;
  min-height: 80px;
}

.frmElement {
  margin: 2px 0 10px 2px;
  /* padding: 10px; */
  border-radius: 5px;
  /* border: 1px solid #c1c1c1; */
  background: #fbfbfb;
  position: relative;
}

input[type=text],
input[type=number],
select,
textarea {
  background: #f1f1f1;
}

.containerFraim div.header {
  background: #eaeaea !important;
  padding: 10px;
  border-radius: 5px 5px 0 0;
  border: 1px solid #d6d6d6;
}

/* Tabs */

#tabs>input {
  height: 2.5em;
  visibility: hidden;
  width: 1px;
}

#tabs>label {
  background: #f9f9f9;
  /* Fondo de las pestañas */
  border-radius: .25em .25em 0 0;
  color: #888;
  /* Color del texto de las pestañas */
  cursor: pointer;
  display: inline-block;
  float: left;
  font-size: 1em;
  /* Tamaño del texto de las pestañas */
  height: 2.5em;
  line-height: 2.5em;
  margin-right: .25em;
  padding: 0 1.5em;
  text-align: center;
}

#tabs input:hover+label {
  background: #ddd;
  /* Fondo de las pestañas al pasar el cursor por encima */
  color: #666;
  /* Color del texto de las pestañas al pasar el cursor por encima */
}

#tabs input:checked+label {
  background: #f1f1f1;
  /* Fondo de las pestañas al presionar */
  color: #444;
  /* Color de las pestañas al presionar */
  position: relative;
  z-index: 6;
  /*
	-webkit-transition: .1s;
	-moz-transition: .1s;
	-o-transition: .1s;
	-ms-transition: .1s;
	*/
}

#content-block {
  background: #f1f1f1;
  /* Fondo del contenido */
  border-radius: 0 .25em .25em .25em;
  min-height: 10em;
  /* Alto del contenido */
  /* position: relative; */
  width: 100%;
  /* z-index: 5; */
  border: 1px solid #e2e2e2;
}

#content-block>div {
  /* opacity: 0; */
  display: none;
  padding: .5em;
  /* position: absolute; */
  /* z-index: -100; */
  width: 100%;
  /*
	transition: all linear 0.1s;
	*/
}

#tabs input#tab-1:checked~#content-block #content-1,
#tabs input#tab-2:checked~#content-block #content-2,
#tabs input#tab-3:checked~#content-block #content-3 {
  /* opacity: 1; */
  display: block;
  /* z-index: 100; */
}

/* TAB end */

.btns {
  position: absolute;
  right: 5px;
  cursor: pointer;
  border: 0px solid #ccc;
  background: #0077ff !important;
  color: #fff;
  padding: 5px;
  z-index: 100;
  display: none;
}

.frmElement.hover {
  border: 1px solid #008eff !important;
  box-shadow: 0 0 10px 0px #90ecff inset;
}

/* .frmGen .frmElement:hover div.btns{ */

.frmElement:hover+.btns {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div _ngcontent-c2="" class="container" dragula="COPYABLE" id="right" ng-reflect-dragula="COPYABLE">
  <div _ngcontent-c2="" class="tabContainer frmElement" id="Tabbox-1">
    <div class="btns">
      <span>
          <button type="button" class="edit"><i class="fas fa-pencil-alt"></i></button>
          <button type="button" class="clone" id="clone_0.8406219829777923"><i class="far fa-clone"></i></button>
          <button type="button" class="remove" id="remove_0.8406219829777923"><i class="far fa-trash-alt"></i></button>
        </span>
    </div>

    <div class="containerFraim tabs">
      <!-- https://codepen.io/WebCamayoc/pen/nLhAa -->
      <div id="tabs">
        <!--Pestaña 1 activa por defecto-->
        <input id="tab-1" type="radio" name="tab-group" checked="checked">
        <label for="tab-1">Tab 1</label>
        <!--Pestaña 2 inactiva por defecto-->
        <input id="tab-2" type="radio" name="tab-group">
        <label for="tab-2">Tab 2</label>
        <!--Contenido a mostrar/ocultar-->
        <div id="content-block">
          <!--Contenido de la Pestaña 1-->
          <div id="content-1">
            <div class="container dropable" dragula="COPYABLE" id="tabContainer0">
              <div _ngcontent-c2="" class="Containerbox frmElement" id="Containerbox-2">
                <div class="btns">
                  <span>
			          <button type="button" class="edit"><i class="fas fa-pencil-alt"></i></button>
			          <button type="button" class="clone" id="clone_0.9341944397820223"><i class="far fa-clone"></i></button>
			          <button type="button" class="remove" id="remove_0.9341944397820223"><i class="far fa-trash-alt"></i></button>
			        </span>
                </div>
                <div class="containerFraim">
                  <div class="header"> Panel </div>
                  <div class="container dropable" dragula="COPYABLE" id="Containerbox2">
                    <div _ngcontent-c2="" class="Framebox frmElement" id="Framebox-3">
                      <div class="btns">
                        <span>
          <button type="button" class="edit"><i class="fas fa-pencil-alt"></i></button>
          <button type="button" class="clone" id="clone_0.6287785288366226"><i class="far fa-clone"></i></button>
          <button type="button" class="remove" id="remove_0.6287785288366226"><i class="far fa-trash-alt"></i></button>
        </span>
                      </div>

                      <div class="container dropable frameBorder" dragula="COPYABLE" id="Framebox3">
                        <div _ngcontent-c2="" class="Containerbox frmElement" id="Containerbox-4">
                          <div class="btns">
                            <span>
                              <button type="button" class="edit"><i class="fas fa-pencil-alt"></i></button>
                              <button type="button" class="clone" id="clone_0.2787709275968595"><i class="far fa-clone"></i></button>
                              <button type="button" class="remove" id="remove_0.2787709275968595"><i class="far fa-trash-alt"></i></button>
                            </span>
                          </div>
                          <div class="containerFraim">
                            <div class="header"> Panel </div>
                            <div class="container dropable" dragula="COPYABLE" id="Containerbox4">
                              <div _ngcontent-c2="" class="rediobox frmElement" id="rediobox-5">
                                <div class="btns">
                                  <span>
          <button type="button" class="edit"><i class="fas fa-pencil-alt"></i></button>
          <button type="button" class="clone" id="clone_0.166250324410125"><i class="far fa-clone"></i></button>
          <button type="button" class="remove" id="remove_0.166250324410125"><i class="far fa-trash-alt"></i></button>
        </span>
                                </div>
                                <label> Radio Options </label>
                                <label><input name="rediobox" disabled="true" type="radio" id="rediobox"> rediobox</label>
                                <label><input name="rediobox" disabled="true" type="radio" id="rediobox-1"> rediobox-1</label>
                              </div>
                            </div>
                          </div>

                        </div>
                        <div _ngcontent-c2="" class="selectbox frmElement" id="selectbox-6">
                          <div class="btns">
                            <span>
                              <button type="button" class="edit"><i class="fas fa-pencil-alt"></i></button>
                              <button type="button" class="clone" id="clone_0.9360886227539027"><i class="far fa-clone"></i></button>
                              <button type="button" class="remove" id="remove_0.9360886227539027"><i class="far fa-trash-alt"></i></button>
                            </span>
                          </div>
                          <label> Select Box</label><select id="selectbox" disabled="true"><option>Select</option></select>
                        </div>
                      </div>

                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
          <!--Contenido de la Pestaña 2-->
          <div id="content-2">
            <div class="container dropable" dragula="COPYABLE" id="tabContainer1"></div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>