Question

我想达到这样的结果：

当我将鼠标悬停或悬停在左侧的项目上时，我想突出显示右侧的项目。

我该怎么做？并且可以通过javascript或jquery或css

以下是代码：

<div id="searchcontainer">

   <script>
   var html2;

    html2 += '<div id="rightcontainer">';
 html2 += '<img id="productimage" src="src/images/retrofit.png"/>';
  html2 += '<div id="imagedetail">';
   html2 += '<span class="details">Product Type</span>';
    html2 += '<span class="details">Version / Size</span>';
    html2 += '<span class="details">Estimated annual Spend</span>';
    html2 += '<span class="details">Site name / manufacturer</span>';
    html2 += '<span class="details">Selling Sales Eng</span>';
    html2 += '</div>'
   html2 += '</div>';
   </script>

</div>

这是我的div 1

<div class="e-Marker"></div>

所以想象一下 div 1 是地图上的一个标记，它位于日本，挪威和加拿大的ff上，这三个信息显示在右边的div上，我将标记悬停在日本和它将突出与日本相对应的权利信息。

谢谢（请尽快解释，因为我是javascript和jquery的初学者）

Answer 1

使用vanilla JS：

selvars=c("Species", attr(satis.step$terms, "term.labels"))
datanew <- iris[Species %in% "virginica", ..selvars ]

> datanew
      Species Sepal.Length Petal.Length Petal.Width
 1: virginica          6.3          6.0         2.5
 2: virginica          5.8          5.1         1.9
 3: virginica          7.1          5.9         2.1

或者，如果rightItem直接位于leftItem之后，则可以使用纯CSS：

document.getElementById("leftItem").addEventListener("mouseover", function() {
    document.getElementById("rightItem").style.border = "2px solid red";
}

Answer 2

您可以找到悬停元素的索引，并将类添加到第二个div中的相应元素。

＆＃13;

$('#main ul li').mouseover(function(){
  var index = $(this).index();
  $('#sub ul li.active').removeClass('active');
  $('#sub ul li').eq(index).addClass('active');
});

$('#main').mouseleave(function(){
  $('#sub ul li.active').removeClass('active');
});

＆＃13;

div {
  width: 100px;
  height: 200px;
  border: 1px solid black;
  float: left;
  margin-left: 20px;
}
div ul {
  margin: 0;
  padding: 0;
}
div ul li {
  list-style: none;
}
div ul li.active {
  border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>
<div id="sub">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

＆＃13;

Answer 3

这是小提琴link - good fiddle 这是一种简单的方法，只要您将鼠标悬停在第一个ul li元素上，并使用.index();进行索引编号，我们必须使用常规选择$('.second > ul > li'). eq($(this).index())来获取第二个元素。做第一个li元素索引的数量相等

有人试着用适当的英语解释，谢谢你，我的英语吮吸为牛

＆＃13;

$('.first > ul > li').mouseenter(function(){
$('.second > ul > li').eq($(this).index()).addClass('background');
}).mouseleave(function(){
$('.second > ul > li').eq($(this).index()).removeClass('background');
})

＆＃13;

.first,.second{
  display:inline-block;
}
li
{list-style-type: none;}
.background{
  background-color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='first'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class='second'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

＆＃13;

使用javascript或css突出显示另一个div上的项目

3 个答案: