Question

所以我试图改变我的div的悬停效果。当我开始这个项目的时候，我就是按照我现在想要的方式进行的，但当时我并不是那么想，所以我改变了它。现在我似乎无法改变它。

所以这是我的代码，

HTML

<div id="left">
  <div id="leftImage">
   //the background image
  </div>
  <div id="overlayLeft">
   //a logo that goes on top of the image when not hovering over it
  </div>
</div>
<div id="right">
  <div id="rightImage">
   //the background image
  </div>
  <div id="overlayRight">
   //a logo that goes on top of the image when not hovering over it
  </div>
</div>

CSS

body {
    background: #ffff;
}

/* Setup for the halves of the screen */

 #right
 {    
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 50%;

    /* Set up proportionate scaling */
    width: 50%;
    height: auto;
    position: fixed;
    top: 0;
    right: 0;
    background: #389A7A;
    background-size:cover;
}

#left
 {    
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 50%;

    /* Set up proportionate scaling */
    width: 50%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    background: #0C4270;
    background-size:cover;
}


/* Setup for the image containers */

 #rightImage, #leftImage
 {
    opacity:1.00;
    filter: alpha(opacity=100); /* For IE8 and earlier */   
    background: rgba(0, 0, 0, 0.15);
    -webkit-transition: opacity 2.00s ease;
    -moz-transition: opacity 2.00s ease;
    transition: opacity 2.00s ease;
    position: relative;
}

#rightImage:hover, #leftImage:hover
 {
    opacity:0.15;
    filter: alpha(opacity=15); /* For IE8 and earlier */      
    background: rgba(0, 0, 0, 1.0);
}

#rightImage:hover + #overlayRight, #leftImage:hover + #overlayLeft 
{
    visibility: visible;
    -webkit-transition: visibility 0.5s ease;
    -moz-transition: visibility 0.5s ease;
    transition: visibility 0.5s ease;
}


/* Setup for the images */

.rightImage 
{
    /* Set rules to fill background */
    min-width: 50%;
    min-height: 100%;

    /* Set up proportionate scaling */
    width: 50%;
    height: auto;

    /* Set up positioning */
    position: fixed;
    top: 0px;
    right: 0;
}

.leftImage 
{
    /* Set rules to fill background */
    min-width: 50%;
    min-height: 100%;

    /* Set up proportionate scaling */
    width: 50%;
    height: auto;

    /* Set up positioning */
    position: fixed;
    top: 0px;
    left: 0;
}


/* Setup for the logo image */

#overlayLeft 
{
    visibility: hidden;
}

.overlayLeft 
{
    /* Set rules to fill background */
    min-width: 40%;

    /* Set up proportionate scaling */
    width: 40%;

    /* Set up positioning */
    position: absolute;
    top: 35%;
    left: 30%;
    pointer-events: none;
}

#overlayRight 
{
    visibility: hidden;
}

.overlayRight 
{   
   /* Set rules to fill background */
    min-width: 40%;

    /* Set up proportionate scaling */
    width: 40%;

    /* Set up positioning */
    position: absolute;
    top: 40%;
    right: 30%;
    pointer-events: none;
}

以下是行动中的代码：JsFiddle

所以我想要实现的是，当我将左边的div悬停在现在发生的效果时，左边的div必须发生在右边的div上。正在进行悬停工作的代码片段如下：

#rightImage:hover, #leftImage:hover
{
    opacity:0.15;
    filter: alpha(opacity=15); /* For IE8 and earlier */      
    background: rgba(0, 0, 0, 1.0);
}

我认为下列其中一个操作符可以正常工作：“+”，“~”，或者只是一个简单的空格：hover和下一个div（#rightImage:hover #leftImage）。

然而我似乎无法让它发挥作用.. 我究竟做错了什么？元素是否没有相同的父元素？我尝试在整个html中添加父div。然而那没用。

Answer 1

据我所知，悬停状态只能影响悬停的元素或子元素。你需要使用一些轻量级的JavaScript来实现这一点。

Answer 2

您应该能够包装from matplotlib import pyplot as plt # def of equal_dist_els see above def select_els(seq, perc): """Select a defined percentage of the elements of seq.""" return seq[::int(round(1./perc if perc != 0 else 0))] list_length = 50 my_list = range(list_length) percentages = range(1, 101) fracts = map(lambda x: x * 0.01, percentages) equal_dist = map(lambda x: abs(len(equal_dist_els(my_list, x)) / float(len(my_list)) - x), fracts) slicing = map(lambda x: abs(len(select_els(my_list, x)) / float(len(my_list)) - x), fracts) plt.plot(fracts, equal_dist, color='blue', alpha=0.8, linewidth=2, label=r'equal_dist_elements') plt.plot(fracts, slicing, color='red', alpha=0.8, linewidth=2, label=r'select_elements by @jonrsharpe') plt.title('Choosing equally dist. fraction of els from a list of length %s' % str(list_length)) plt.xlabel('requested fraction') plt.ylabel('absolute deviation') plt.legend(loc='upper left') plt.show()和#left div，然后将悬停样式应用于该元素。像这样：

#right

然后......

<div class="wrapper">
    <div id="left"> ... </div>
    <div id="right"> ... </div>
</div>

请参阅此fiddle。

在div的悬停时更改其他div css

2 个答案: