CSS悬停触发其他div悬停

时间：2017-05-22 00:43:20

标签： javascript html css css3

当用户在一个div上盘旋时，我可以让其他div显示：hover CSS吗？

例如，如果用户将鼠标悬停在文本＆＃34;右视图＆＃34;上，我们希望该列的不透明度增加到1，并且浅蓝色下划线条出现在那里。 （字母a -d将替换为SVG图标）。

https://jsfiddle.net/da8noj92/3/ 

<div class="dvToolbar2Container">
  <div class="dvToolbar2Table">
    <div class="dvToolbar2TableRow1">
      <asp:Panel ID="dvIDToolbar2Row1Cell1" runat="server" class="dvToolbar2TableRow1Cell" onclick="fJToolbar2Click(1);">
        a
      </asp:Panel>
      <asp:Panel ID="dvIDToolbar2Row1Cell2" runat="server" class="dvToolbar2TableRow1CellSelected" onclick="fJToolbar2Click(2);">
        b
      </asp:Panel>
      <asp:Panel ID="dvIDToolbar2Row1Cell3" runat="server" class="dvToolbar2TableRow1Cell" onclick="fJToolbar2Click(3);">
        c
      </asp:Panel>
      <asp:Panel ID="dvIDToolbar2Row1Cell4" runat="server" class="dvToolbar2TableRow1Cell" onclick="fJToolbar2Click(4);">
        d
      </asp:Panel>
    </div>
    <div class="dvToolbar2TableRow2">
      <asp:Panel ID="dvIDToolbar2Row2Cell1" runat="server" class="dvToolbar2TableRow2Cell" onclick="fJToolbar2Click(1);">
        Top View
      </asp:Panel>
      <asp:Panel ID="dvIDToolbar2Row2Cell2" runat="server" class="dvToolbar2TableRow2CellSelected" onclick="fJToolbar2Click(2);">
        Left View
      </asp:Panel>
      <asp:Panel ID="dvIDToolbar2Row2Cell3" runat="server" class="dvToolbar2TableRow2Cell" onclick="fJToolbar2Click(3);">
        Right View
      </asp:Panel>
      <asp:Panel ID="dvIDToolbar2Row2Cell4" runat="server" class="dvToolbar2TableRow2Cell" onclick="fJToolbar2Click(4);">
        Bottom View
      </asp:Panel>
    </div>
    <div class="dvToolbar2TableRow3">
      <asp:Panel ID="dvIDToolbar2Row3Cell1" runat="server" class="dvToolbar2TableRow3Cell" onclick="fJToolbar2Click(1);">

      </asp:Panel>
      <asp:Panel ID="dvIDToolbar2Row3Cell2" runat="server" class="dvToolbar2TableRow3CellSelected" onclick="fJToolbar2Click(2);">

      </asp:Panel>
      <asp:Panel ID="dvIDToolbar2Row3Cell3" runat="server" class="dvToolbar2TableRow3Cell" onclick="fJToolbar2Click(3);">

      </asp:Panel>
      <asp:Panel ID="dvIDToolbar2Row3Cell4" runat="server" class="dvToolbar2TableRow3Cell" onclick="fJToolbar2Click(4);">

      </asp:Panel>
    </div>
  </div>
</div>

4 个答案:

答案 0 :(得分：1)

我知道这并没有直接回答你的问题，但如果我这样做，我会使用一些javascript来切换CSS。

＆＃13;
＆＃13; 
$(".box").on("mouseenter", function(){
  $(".box").addClass("dim");
  $(this).addClass("hilight");
});

$(".box").on("mouseout", function(){
  $(".box").removeClass("dim");
  $(this).removeClass("hilight");
});
＆＃13; 
.box {
  width: 200px;
  height: 50px;
  margin: 5px;
  background: #CCC;
}

.dim {
  opacity: 0.5;
  border: none;
}

.hilight {
  opacity: 1;
  border-bottom: 5px solid lightskyblue;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="box">BOX 1</div>
<div class="box">BOX 2</div>
<div class="box">BOX 3</div>
<div class="box">BOX 4</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

在div[class^="dvToolbar2TableRow"]元素中的<span>内换行文字，替换为border-bottom设置background，为span "Top Left"文字选择下划线效果使用选择器.dvToolbar2TableRow2:not(:hover) .dvToolbar2TableRow2CellSelected span 

/* Toolbar 2 */

.dvToolbar2Container {
  border-style: solid;
  border-color: #3A3A3A;
  border-width: 2px 0px 0px 0px;
  width: 100%;
  background-color: white;
  height: 46px;
}

.dvToolbar2Table {
  display: table;
  width: 100%;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.dvToolbar2TableRow1 {
  display: table-row;
  text-align: center;
}

.dvToolbar2TableRow2 {
  display: table-row;
  height: 10px;
  text-align: center;
}

.dvToolbar2TableRow3 {
  display: table-row;
  height: 4px;
}

.dvToolbar2TableCell {
  display: table-cell;
  width: 25%;
  text-align: center;
}

.dvToolbar2TableRow1Cell {
  display: table-cell;
  width: 25%;
  text-align: center;
  opacity: 0.8;
  cursor: pointer;
}

.dvToolbar2TableRow1Cell:hover {
  opacity: 1;
}

.dvToolbar2TableRow2Cell {
  display: table-cell;
  text-align: center;
  opacity: 0.8;
  cursor: pointer;
}

.dvToolbar2TableRow3Cell {
  display: table-cell;
  text-align: center;
  cursor: pointer;
}

.dvToolbar2TableRow1CellSelected {
  display: table-cell;
  width: 25%;
  text-align: center;
  opacity: 1;
  cursor: default;
}

.dvToolbar2TableRow2CellSelected {
  display: table-cell;
  width: 25%;
  text-align: center;
  opacity: 1;
  cursor: default;
}

.dvToolbar2TableRow3CellSelected {
  display: table-cell;
  width: 25%;
  text-align: center;
  opacity: 1;
  cursor: default;
}

.dvToolbar2TableRow2:not(:hover) .dvToolbar2TableRow2CellSelected span {
  display: block;
  width: 100%;
  border-bottom: 4px solid #01C0FF;
}

.dvToolbar2TableRow2 span {
  opacity: 0.8;
}

.dvToolbar2TableRow2:hover span {
  border-bottom: "none";
}

div[class^="dvToolbar2TableRow"] span:hover {
  display: block;
  width: 100%;
  border-bottom: 4px solid #01C0FF;
  opacity: 1;
}


/* Toolbar 2 End */
<div class="dvToolbar2Container">
  <div class="dvToolbar2Table">
    <div class="dvToolbar2TableRow1">
      <div id="dvIDToolbar2Row1Cell1" runat="server" class="dvToolbar2TableRow1Cell" onclick="fJToolbar2Click(1);">
        a
      </div>
      <div id="dvIDToolbar2Row1Cell2" runat="server" class="dvToolbar2TableRow1CellSelected" onclick="fJToolbar2Click(2);">
        b
      </div>
      <div id="dvIDToolbar2Row1Cell3" runat="server" class="dvToolbar2TableRow1Cell" onclick="fJToolbar2Click(3);">
        c
      </div>
      <div id="dvIDToolbar2Row1Cell4" runat="server" class="dvToolbar2TableRow1Cell" onclick="fJToolbar2Click(4);">
        d
      </div>
    </div>
    <div class="dvToolbar2TableRow2">
      <div id="dvIDToolbar2Row2Cell1" runat="server" class="dvToolbar2TableRow2Cell" onclick="fJToolbar2Click(1);">
        <span>Top View</span>
      </div>
      <div id="dvIDToolbar2Row2Cell2" runat="server" class="dvToolbar2TableRow2CellSelected" onclick="fJToolbar2Click(2);">
        <span>Left View</span>
      </div>
      <div id="dvIDToolbar2Row2Cell3" runat="server" class="dvToolbar2TableRow2Cell" onclick="fJToolbar2Click(3);">
        <span>Right View</span>
      </div>
      <div id="dvIDToolbar2Row2Cell4" runat="server" class="dvToolbar2TableRow2Cell" onclick="fJToolbar2Click(4);">
        <span>Bottom View</span>
      </div>
    </div>
    <div class="dvToolbar2TableRow3">
      <div id="dvIDToolbar2Row3Cell1" runat="server" class="dvToolbar2TableRow3Cell" onclick="fJToolbar2Click(1);">

      </div>
      <div id="dvIDToolbar2Row3Cell2" runat="server" class="dvToolbar2TableRow3CellSelected" onclick="fJToolbar2Click(2);">

      </div>
      <div id="dvIDToolbar2Row3Cell3" runat="server" class="dvToolbar2TableRow3Cell" onclick="fJToolbar2Click(3);">

      </div>
      <div id="dvIDToolbar2Row3Cell4" runat="server" class="dvToolbar2TableRow3Cell" onclick="fJToolbar2Click(4);">

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

答案 2 :(得分：1)

您可以编写一个将CSS规则应用于子元素的选择器，例如：

＆＃13;
＆＃13; 
$(document).ready(function(){
  $('.child').click(function(){
    $('#log').text($(this).find('.text').text());
    $('.child.active').removeClass('active');
    $(this).addClass('active');
  })
});
＆＃13; 
.parent {
  display: flex;
  background-color: #eee;
  height: 40px;
  line-height: 40px;
}

.parent > .child {  
  display: flex;
  flex : 1;
  flex-direction: column;
  cursor: pointer;
}

.child > .text-container { 
  font-family: Segoe UI, Helvetica Neue, Tahoma, monospace;
  display: flex;
  flex :1;
}

.child > .text-container > .text {
  width: 100%;
  text-align: center;
}

.child > .indicator {
  height: 2px;
  width: 100%;
  background-color: #e0e0e0;
  display: flex;
}

.child:hover > .indicator {
  background-color: #88bb77;
}

.child.active > .indicator,
.child.active:hover > .indicator
{
  background-color: #446633;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent">
  <div class="child active">
    <div class="text-container">
      <div class="text">First</div>
    </div>
    <div class="indicator"></div>
  </div>
  <div class="child">
    <div class="text-container">
      <div class="text">Second</div>
    </div>
    <div class="indicator"></div>
  </div>
  <div class="child">
    <div class="text-container">
      <div class="text">Third</div>
    </div>
    <div class="indicator"></div>
  </div>
  <div class="child">
    <div class="text-container">
      <div class="text">Fourth</div>
    </div>
    <div class="indicator"></div>
  </div>
</div>
<pre id="log"></pre>
＆＃13;
＆＃13;
＆＃13;

如果您将具有 子 类的任何元素悬停在其子元素的背景颜色上，其类 指示符 将改变（参见CSS部分中的最后2个选择器）。

希望这个肝脏

答案 3 :(得分：1)

如果您希望坚持使用代码，则可以在每个列悬停时为其添加边框 - 如果已经选中，则将其删除：

opacity: 0.5;  
border-bottom:4px solid #01C0FF;

https://jsfiddle.net/emilvr/akxmy8L7/

相关问题
最新问题