Question

我有9个“ div”，其设计如下： 1 2 3 4 5 6 7 8 9

我要做的是，当鼠标悬停在数字5 div上时，它将显示图像，而当我将鼠标悬停在任何其他div（1,2,3,4,6,7,8,9）上时，在num 5 div显示不同的设计。

	<div class="flex-container" id="container">
		<div class="child" id="coop" ></div>
		<div class="child" id="wai"></div>
		<div class="child" id="educ"></div>
		<div class="child" id="tech"> </div>
		<div class="parent" id="index"></div>
		<div class="child" id="pmo"></div>
		<div class="child" id="hobby"></div>
		<div class="child" id="cook"></div>
		<div class="child" id="cont"></div>
	</div>

我更喜欢使用CSS，因为我仍然缺乏js的经验。

Answer 1

from multiprocessing import Pool

# Wrapper of the function to map:
class makefun:
    def __init__(self, var2):
        self.var2 = var2
    def fun(self, i):
        var2 = self.var2
        return var1[i] + var2

# Couple of variables for the example:
var1 = [1, 2, 3, 5, 6, 7, 8]
var2 = [9, 10, 11, 12]

# Open the pool:
pool = Pool(processes=2)

# Wrapper loop
for j in range(len(var2)):
    # Obtain the function to map
    pool_fun = makefun(var2[j]).fun

    # Fork loop
    for i, value in enumerate(pool.imap(pool_fun, range(len(var1))), 0):
        print(var1[i], '+' ,var2[j], '=', value)

# Close the pool
pool.close()

div{
    width: 100%;
    height: 15px;
    cursor: pointer;
    background: red;
    
}
.flex-container:hover div:nth-child(5){
  background: yellow;
}
.flex-container div:nth-child(5):hover{
    background-image:url(https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg?sz=32);
}

Answer 2

尝试

$(document).on('mouseover','.child',function(e){
   //different design, For example, change the background color
   $(this).css('background-color','red');
});
$(document).on('mouseover','.parent',function(e){
   //show image on tooltip, change image sourc
    $(this).tooltip({ content: '<img 
     src="http://icdn.pro/images/fr/a/v/avatar-barbe- 
     brun-homme-utilisateur-icone-9665-128.png" />' });
});

Answer 3

欢迎使用StackOverflow。

您可以通过定义CSS内容URL来更改img的src，如下所示：

#index img {
   content:url("https://i.imgur.com/ZfnIxu8.png");
}

如您所想，要使它悬停，很简单：

#index:hover img {
   content:url("https://i.imgur.com/4XaKXD5.jpg");
}

这解决了第一部分。

现在，要用一个div的悬停更改其他div，只需在每个div上指定：hover，然后执行以下操作：

#coop:hover #index img, #wait:hover #index img, #educ:hover #index img, 
#tech:hover #index img, #pmo:hover #index img, #hobby:hover #index img, 
#cook:hover #index img, #cont:hover #index img {
   content:url("https://i.imgur.com/6Fb0Dvt.jpg");
}

这是说“我在:hover上#id时，将定义的样式应用于#index img”。

我正在寻找一种更简洁的方式来编写所有这些内容，但是不幸的是:is选择器仍处于试验阶段。 You can read more on that here，但这就是您的代码的样子：

:is(#coop, #wait, #educ, #tech, #pmo, #hobby, #cook, #cont):hover #index img {
   content:url("https://i.imgur.com/lABKzWp.png");
}

Answer 4

#container div{
background:red;
display:block;
height:10px;
width:100%;
margin:10px;
color:#fff;
font-size:18px;
text-align:center;
padding:5px;
}

#container #index img{
display:none;
}

#container #index:hover img {
display:block;
}

#container .child:hover {

}

<html>
<body>
<div class="flex-container" id="container">
		<div class="child" id="coop" >1</div>
		<div class="child" id="wai">2</div>
		<div class="child" id="educ">3</div>
		<div class="child" id="tech">4 </div>
		<div class="parent" id="index">5
    <img alt="here is the image" src="https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg"/>
    </div>
		<div class="child" id="pmo"></div>
		<div class="child" id="hobby"></div>
		<div class="child" id="cook"></div>
		<div class="child" id="cont"></div>
	</div>
  </body>
  </html>

悬停ID时更改图像

4 个答案: