Question

我有file_save_location='myfolder' file_name='filename' location = ''myfolder1' os.chdir(location) files_xls = glob.glob("*.xls*") excel_names=[f for f in files_xls] sheets = pd.ExcelFile(files_xls[0]).sheet_names def combine_excel_to_dfs(excel_names, sheet_name): sheet_frames = [pd.read_excel(x, sheet_name=sheet_name) for x in excel_names] combined_df = pd.concat(sheet_frames).reset_index(drop=True) return combined_df i = 0 while i < len(sheets): process = sheets[i] consolidated_file= combine_excel_to_dfs(excel_names, process) consolidated_file.to_csv(file_save_location+file_name+'.csv') i = i+1 else: "we done on consolidation part"个网格div，一个带有图像，另一个带有名称列表。每个div中的每个元素对应于另一个div中的另一个元素（例如2对应于.image-1）。

当您将鼠标悬停在一个元素上时，我希望该元素和另一个div中的相应元素都消失。

例如，当您将鼠标悬停在.name-1上时，我希望它和相应的"Name 1"都消失。这是我一般的image设置：

html

对不起，我已经坚持了几个小时，希望获得一些帮助！这是一个小提琴：

https://jsfiddle.net/8egpf1j3/

Answer 1

使用JQuery的一种解决方案是将data-*属性添加到HTML标记中。在这种方法中，我们将添加一个data-target属性，该属性将保留相关元素的class，当当前元素悬停时，该元素应该被隐藏（使用opacity: 0）。您可以使用JQuery.data()处理data-*属性。请查看下一个简化的示例，希望从那里您可以理解基本思想。

$(".grid-box").hover(
    // Handler for hover-in.
    function()
    {
        $(this).css("opacity", 0);
        $($(this).data("target")).css("opacity", 0);
    },
    // Handler for hover-out.
    function()
    {
        $(this).css("opacity", 1);
        $($(this).data("target")).css("opacity", 1);
    }
);

.grid-box {
    width: 100px;
    background-color: skyblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
 
   <div class="picture-grid grid">
     <div class="grid-box image-1" data-target=".name-1">
       <a href="#">IMAGE 1</a>
     </div>
     <div class="grid-box image-2" data-target=".name-2">
       <a href="#">IMAGE 2</a>
     </div>
     <div class="grid-box image-3" data-target=".name-3">
       <a href="#">IMAGE 3</a>
     </div>
     <div class="grid-box image-4" data-target=".name-4">
       <a href="#">IMAGE 4</a>
     </div>
   </div>
   
   <hr>

   <div class="names-grid grid">
     <div class="grid-box name-1" data-target=".image-1">
       <a href="#">Name 1</a>
     </div>
     <div class="grid-box name-2" data-target=".image-2">
       <a href="#">Name 2</a>
     </div>
     <div class="grid-box name-3" data-target=".image-3">
       <a href="#">Name 3</a>
     </div>
     <div class="grid-box name-4" data-target=".image-4">
       <a href="#">Name 4</a>
     </div>
   </div>

</div>

Answer 2

您可以这样做，我想图像和名称的数量相同，并且它们的顺序相同。表示第一张图片在其div中是第一位，而第一张图片在其div中是第一位。

//getting all pictures by <a> tag
var pictures = document.querySelector(".picture-grid").querySelectorAll("a"); 
//getting all names by <a> tag
var names = document.querySelector(".names-grid").querySelectorAll("a");

//attach reaction to "hover" event to all pictures and names
for (var i = 0; i < pictures.length; i++){
  pictures[i].addEventListener("mouseenter", hide.bind(i));
  names[i].addEventListener("mouseenter", hide.bind(i));
}

//run function on "hover" event, i = index of chosen image/name
function hide (){
  var i = this;
  pictures[i].style.opacity = 0;
  names[i].style.opacity = 0;
}

将不同div下的多个元素悬停时消失

2 个答案: