怎么可以用UI给的很多logo图片做出右边这种效果，hover时候高亮

img


如图，怎么可以用UI给的很多logo图片做出右边这种效果，hover时候高亮，然后左边这里会显示对应的内容，没头绪了

img

echarts 词云图

如果图片是一整个的话，就用一个个透明div定位过去，写触发事件就行

这种直接用框架，手写太麻了

https://www.jq22.com/yanshi2380 把文字改成图片

需要高亮的元素定义一个class="active",如（我这里是vue）：

<div class="active" @mouseenter="enter('1')" @mouseleave="leave"></div>

.active:hover{
    background-color: #e37a2f;
    opacity: 0.8;
  }


       enter(index){//鼠标移入hover触发
          //要显示的内容可以用一个数组存起来，通过index拿到对应的值来显示操作左边的内容

        },
        leave(){//鼠标移出hover触发

        }

可以用 echarts 的散点图模拟出这个样子
具体的你可以看看他的操作手册

img