动画悬停影响非兄弟元素答案

【问题标题】：animate hover affects non sibling element动画悬停影响非兄弟元素
【发布时间】：2015-03-10 14:45:47
【问题描述】：

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>

【问题讨论】：

使用 css 你不能影响非兄弟/子元素。
这是你尝试的吗？ codepen.io/anon/pen/PwdMgd 否则，有一种方法可以选择区域以响应 :hover 使用指针事件属性，它是特定于安静的，在某些情况下无济于事（表单、链接、选择...）
这里是一个带有指针事件想法的例子：codepen.io/gc-nomade/pen/xbavvq，什么最适合画草图？悬停标题即可查看
codepen 示例不起作用，应用时，它仍然直接影响文本旁边的 img。在这种情况下，指针事件属性如何工作？
您使用哪种浏览器？关于指针事件，当孩子悬停时，父母也是，没有指针事件，可以捕捉或不捕捉悬停的过滤器

标签： html css twitter-bootstrap hover jquery-animate

【解决方案1】：

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

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

基本上，无论您将鼠标悬停在您选择激活动画的任何容器上，您都可以在“啤酒”中添加一个额外的类。

在这个 JSFIDDLE 中你可能会看得更清楚（因为我解释得很糟糕，不是我的主要语言，抱歉）：

【讨论】：