Question

当我将鼠标悬停在另一个上时，我有两个相邻的选择器。在下面的示例中，两个选择器应该在悬停时影响其他CSS。这在悬停.a时效果很好，但在悬停.b时则无效。我意识到这是因为DOM是按顺序读取的，因此CSS选择器无法向后工作。

但是，是否有可以实现此效果的jQuery解决方法（或任何其他建议）？

感谢。

HTML

<figure>
    <div class="a">
        A
    </div>
    <div class="b">
        B
    </div>
</figure>

CSS

.a {
    width: 100px;
    height: 100px;
    background: red;
}

.b {
    width: 100px;
    height: 100px;
    background: blue;
}

.a:hover ~ .b {
    background: green;
}

.b:hover ~ .a { /* This one doesn't work */
    background: green;
}

Answer 1

没有css前一个元素选择器。

.b:hover ~ .a { /* This one doesn't work */
    background: green;
}

General sibling combinator：

一般兄弟组合器由＆＃34; tilde＆＃34; （U + 007E，〜）分隔两个简单选择器序列的字符。该由两个序列表示的元素共享同一个父元素文档树和第一个序列表示的元素先于（不一定是立即）由...表示的元素第二个。

一种解决方案是使用jquery .prev()：

＆＃13;

$(".b").hover(function() {
  //using prev selector and toggleClass
  $(this).prev().toggleClass("active");
});

＆＃13;

.a {
  width: 100px;
  height: 100px;
  background: red;
}
.b {
  width: 100px;
  height: 100px;
  background: blue;
}
.a:hover ~ .b {
  background: green;
}
.active {
  background: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
  <div class="a">
    A
  </div>
  <div class="b">
    B
  </div>
</figure>

＆＃13;

<强>参考

.hover()

.toggleClass()

Answer 2

css中没有以前的选择器。一种方法是使用@Alex Char指出的jQuery实现它，而其他方式是将鼠标悬停在父级上，而不是实际的项目，使用这样的纯css：

<figure class='parent'>
    <div class="a">
        A
    </div>
    <div class="b">
        B
    </div>
</figure>

app gradle:
apply plugin: 'com.android.application'

android {
    compileSdkVersion 22
    buildToolsVersion "23.0.0 rc2"

    defaultConfig {
        applicationId "com.example.daniel.testing6"
        minSdkVersion 15
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
        multiDexEnabled true
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    //compile fileTree(dir: 'libs', include: ['*.jar'])
    compile project(path: ':backend', configuration: 'android-endpoints')
    //configurations { all*.exclude group: 'com.android.support', module: 'support-v4' }
    compile 'com.android.support:appcompat-v7:22.2.1'
    compile 'com.google.android.gms:play-services:8.1.0'
    compile 'com.android.support:multidex:1.0.0'
    compile 'com.android.support:design:22.2.1'
}

backend gradle:
// If you would like more information on the gradle-appengine-plugin please refer to the github page
// https://github.com/GoogleCloudPlatform/gradle-appengine-plugin

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.google.appengine:gradle-appengine-plugin:1.9.18'
    }
}

repositories {
    jcenter();
}

apply plugin: 'java'
apply plugin: 'war'
apply plugin: 'appengine'

sourceCompatibility = JavaVersion.VERSION_1_7
targetCompatibility = JavaVersion.VERSION_1_7

dependencies {
    appengineSdk 'com.google.appengine:appengine-java-sdk:1.9.18'
    compile 'com.google.appengine:appengine-endpoints:1.9.18'
    compile 'com.google.appengine:appengine-endpoints-deps:1.9.18'
    compile 'javax.servlet:servlet-api:2.5'
    compile 'com.googlecode.objectify:objectify:4.0b3'
    compile 'com.ganyo:gcm-server:1.0.2'
}

appengine {
    downloadSdk = true
    appcfg {
        oauth2 = true
    }
    endpoints {
        getClientLibsOnBuild = true
        getDiscoveryDocsOnBuild = true
    }
}
project gradle:
// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:1.2.3'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        jcenter()
    }
}

以前相邻的兄弟选择器解决方法？

2 个答案: