Question

http://julieparlade.com/Web2/Fox_And_Hound/Beers.html

对于上面的网站页面，当红色框中的描述符悬停时，我试图在蓝色框中为啤酒图像设置动画。就孩子/父母/兄弟姐妹关系而言，这两个元素并不相互接近，那么我是否还能让它们相互影响？

以下是我在css中的内容

    /*==========================
        Hover 1 affect another
        ==========================*/
        .text-box-stout{
            display: inline-block;
            -webkit-transition: 1s ease-in-out;
            -o-transition: 1s ease-in-out;
            transition: 1s ease-in-out;
            border: red 1px solid;
            cursor: pointer;
        }

        .stout-bottle{
        border: blue 1px solid;
        }

        .text-box-stout:hover + .stout-bottle{
            cursor: pointer;
            -webkit-transform: rotate(5deg);
            -ms-transform: rotate(5deg);
            -o-transform: rotate(5deg);
            transform: rotate(5deg);
            -webkit-transform: rotate(-5deg);
            -ms-transform: rotate(-5deg);
            -o-transform: rotate(-5deg);
            transform: rotate(-5deg);
            -webkit-transform: rotate(5deg);
            -ms-transform: rotate(5deg);
            -o-transform: rotate(5deg);
            transform: rotate(5deg);
        }

这是html：

        <!-- TOP ROW Logo, title, desciption, lager -->
        <article class="row"> 
            <div class="col-sm-3 box hidden-xs"> 
                <!-- Stout Text-->
                <div class= "opacity_4 text-box-stout">
                    <h5> The artful blending of six malts and months of aging keep this <span>stout </span> the toast of the winter season.</h5>        
                </div>      
            </div>
            <div class="col-sm-3 box"> 
                <!-- Logo-->
                    <a href="index.html">
                        <img src="img/logo.png" alt="Fox and Hound Logo" id= "beerslogo">
                    </a>        
            </div>
            <div class="col-xs-6 col-sm-3 box"> 
                <!-- Lager-->
                <div class= "opacitybeer">
                    <img src="img/lager.png" alt="Lager" class="lager"> 
                </div>
            </div>  
            <div class="col-xs-6 col-sm-3 box"> 
                <!-- Title-->
                <div class= "opacity_lager2 visible-xs">
                        <div class="beers">
                            <a href="Beers.html">
                            <h2 >Home <br> Brewed<br> Since</h2>
                            </a>
                            <h3>2009</h3>   
                        </div>
                </div>
                <div class= "opacity_lager2 lagertext">
                    <!-- Lager Text-->
                    <h5>
                        Smooth Character, hints of caramel and toast, and remarkable drinkability define this ruby-colored <span> lager</span>.
                    </h5>       
                </div>  
            </div>
        </article> 

        <article class="row"> 
                    <!-- Stout-->
            <div class="col-xs-6 col-sm-3 box visible-xs"> 
                <!-- Stout Text-->
                <div class= "opacity_lager4">
                    <h5> The artful blending of six malts and months of aging keep this <span>stout </span> the toast of the winter season.</h5>        
                </div>      
            </div>

            <div class="col-xs-6 col-sm-3 box stout-bottle">    
                <img src="img/stout.png" alt="stout" class="lager">
            </div>

Answer 1

对于你的例子，如果你想要的动画很简单，我会用一点jquery来使用这个转变：

$(document).ready(function () {
            $('.button').hover(function () {
                $('.image').toggleClass("rotate")
            });
        });

基本上你加入了＃34;啤酒＆＃34;无论您将鼠标悬停在您选择用于激活动画的任何容器上，都可以使用额外的课程。

在这个 JSFIDDLE 中你可能会看到它更好（因为我解释得很糟糕，不是我的主要lenguaje，抱歉）：

动画悬停影响非兄弟元素

1 个答案: