Question

当我悬停或点击类=＆＃34; img-1＆＃34;时，我想调出一个类=＆＃34;块1＆＃34;并隐藏class =＆＃34; block-default＆＃34;。此外，我想在没有动作时重新出现默认块。

<style>
.bloc{
width: 300px;
height: 300px;
position: absolute;
}

.bloc:nth-child(1){
background-color: #003169;
}

.bloc:nth-child(2){
background-color: #00A8FF;
}

img{
float:right ;
}
</style>

<body>
<div class="Bloc">
<div class="bloc">Bloc-1</div>
<div class="bloc">Bloc-2</div>
<div class="bloc">Bloc-defaut</div>
</div>

<div class="img">
<img class="img-1"  title="image-1" src="" />
<img class="img-2" title="image-2" src="" />
</div>
</body>

Answer 1

添加您可以在默认位置添加其他类，或使用<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="origin.superbros.sportsmedia.MainActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" app:layout_scrollFlags="scroll|enterAlways|snap"/> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.AppBarLayout>  <include layout="@layout/multi_tabs_content_main" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin" android:src="@android:drawable/ic_dialog_email" /> </android.support.design.widget.CoordinatorLayout>

选择它

jQuery的：

nth-child(n)

}）;

的CSS：

 $(document).ready(function(){


$('.img-1').on('mouseover mouseout click',function(){


  $('.bloc-default').toggleClass('hide')
})

HTML：

.bloc{
width: 100px;
height: 100px;
position: absolute;
}

.hide{

  display:none;
}

.bloc{
background-color: #CC2222;

}

.bloc:nth-child(1){
background-color: #003169;
}

.bloc:nth-child(2){
background-color: #00A8FF;
}

img{
float:right ;
}

Demo

Answer 2

试试这个：

var img1 = document.querySelectorAll("[title=image-1]");

img1.onclick = function() {

    var currentClass = (' ' + img1.className + ' ').indexOf(' block-default ') > -1;
    if (currentClass) {
        img1.className =
        img1.className.replace(/(?:^|\s)block-default(?!\S)/g, '');
        img1.className += " block-1";
    } 
    else {
        img1.className =
        img1.className.replace(/(?:^|\s)block-1(?!\S)/g, '');
        img1.className += " block-default";
    }
};

img1.onmouseover = function() {

    var currentClass = (' ' + img1.className + ' ').indexOf(' block-default ') > -1;
    if (currentClass) {
        img1.className =
        img1.className.replace(/(?:^|\s)block-default(?!\S)/g, '');
        img1.className += " block-1";
    }
};

img1.onmouseout = function() {

    var currentClass = (' ' + img1.className + ' ').indexOf(' block-1 ') > -1;
    if (currentClass) {
        img1.className =
        img1.className.replace(/(?:^|\s)block-1(?!\S)/g, '');
        img1.className += " block-default";
    } 
};

打开一个div来点击并用jquery悬停

2 个答案: