当鼠标hover圆圈的时候，如何控制对应的字体变颜色？

Question

<div >
                <div class="circle_outer">
                <div class="circle_inner">
                    <div>
                        <div class="circle_inner_1"><img alt="" src="/ehouse/img/item/tourism/circle1.png" ></div> 
                        <div class="circle_inner_1"><img alt="" src="/ehouse/img/item/tourism/circle2.png"></div> 
                    </div>
                    <div>
                        <div class="circle_inner_1"><img alt="" src="/ehouse/img/item/tourism/circle3.png"></div>  
                        <div class="circle_inner_1"><img alt="" src="/ehouse/img/item/tourism/circle4.png"></div> 
                    </div>

                </div>
                <div class="top_left circle_around">要求一
                </div>
                <div class="top_right circle_around">要求二
                </div>
                <div class="bottom_left circle_around">要求三
                </div>
                <div class="bottom_right circle_around">要求四
                </div>
            </div>
            </div>

Answer 1

文字元素是图片的后代 才能使用[ 父:hover 后代 ]的选择器改变后代的样式
如果不在其中 就只好调用JS的onmouseover/onmouseout

图片元素.onmouseover = function(){
    文字.style.color = 'red'
}

//还原
图片元素.onmouseout = function(){
    文字.style.color = 'black'
}

不过要注意如果使用getElementsByClassName方法的话会返回一个类数组，需要用下标[]取单个dom元素

Answer 2

$('.circle_inner_1').on('mouseover',function(){
        console.log($(this).index());//获取第几个
        switch($(this).index()){
            case 0 ： $('.top_left').css('color','red');break;
            case 1 ：
            case 2 :
            case 3 :
            ......
        }                
    });
 

别忘了加移出事件

Answer 3

使用js进行控制使用鼠标移入事件mouseover

Answer 4

简单讲一下思路
你这个是四张图片合成的 也就是说 每一张图片代表一种字体颜色
所以 你可以监听 每一张图片所对应img的mouseover事件
如果是img1的mouseover被触发 给当前对应的字的字体给颜色1
如果是img2的mouseover被触发 给当前对应的字的字体给颜色2
以此类推

Answer 5

父元素控制子元素hover

Answer 6

css不行吗？ xx:hover xx {}

Answer 7

可以用js控制hover样式，https://www.jianshu.com/p/009...