如何在同一 div 的不同元素上添加悬停效果

弗拉德亚历山德鲁94

大家好,这是我第一次在这里发帖。我的问题是如何为 div 中的元素添加不同的悬停效果。

我有一个包含 3 个元素的 div:一个图像、一个按钮和一个段落,我已经对 div 有了缩放效果来更改整个容器的大小,但我还想在悬停时更改按钮的颜色div 上的任何地方,不一定在按钮上。这同样适用于图像。

div:

<div class="float_tab">
      <img src="./NY_2.jpeg" alt="imagine"/>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam vel ipsum autem, sed aut sunt repellat laudantium aspernatur fugiat dolorem.</p>
      <input class="btn" value="Enter" type="button">
    </div>

程式化

    .float_tab:hover{
      transform: scale(1.3);
    }
    .float_tab {
      width: 210px;
      height: 300px;
      background-color: rgb(128, 177, 220, 0.7);
      border-radius: 10px;
      display: inline-block;
      position: relative;
      top:-1500px;
      left: 570px;
      margin-right: 100px;
      transition: 1s;
    
    }
    img {
      width: 210px;
      height: 120px;
      border-radius: 5px;
      opacity: 0.8;
    
    }
    
    p {
      text-align: center;
      font-weight: bold;
      font-size: 14px;
    }
    
    
    .btn {
      height: 20px;
      width: 90px;
      margin-left: 60px;
      margin-top: 10px;
      background-color: #80b1dc;
      align-items: center;
      border-radius: 5px;
    }
理查德·法默

css 只会对匹配的元素应用效果,因此:

<script>
    .float_tab:hover img{
        //css here
    }
    
    .float_tab:hover .btn{
        //css here
    }
</script>

<div class="float_tab">
      <img src="./NY_2.jpeg" alt="imagine"/>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam vel ipsum autem, sed aut sunt repellat laudantium aspernatur fugiat dolorem.</p>
      <input class="btn" value="Enter" type="button">
</div>

会做。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在同一div中将jQuery悬停用于div和html标签

javascript-如何在同一页面,不同的div上加载两个Google图表

如何在div上添加背景幕(灯箱效果)?

将鼠标悬停在同一div中存在的按钮上时,如何更改div背景颜色?

如何在reactjs的同一个div上使用多个独立的条件样式?

如何在同一个div中获得不同的文本对齐方式?

如何在div上创建悬停动画

如何在不刷新页面的情况下在同一{div}上显示表单成功消息?

如何在同一行上显示包含多行的两个div

如何在引导程序的同一行上放置两个div

如何在Selenium Python中的同一个div中查找最后一个元素

如何在鼠标悬停到页面上的所有div上添加悬停效果?

如何在完整的div而不是SVG路径上添加悬停?

如何在另一个div的顶部添加文本div,同时保持将鼠标悬停在其下方的div上的能力?

如何在同一行上放置两个div?

如何在div上添加图像而不丢失CSS悬停效果中的先前内容

如何通过单选按钮选择在同一div上加载不同的局部视图?

如何将悬停效果添加到使用悬停嵌套到元素的元素上?

如何在同一PDF中同时打印多个div?

如何使用纯JavaScript在元素上触发悬停效果?

如何在不设置宽度的情况下将两个div放在同一行上?

如何在同一行上对齐div输入标签和按钮

如何在带有 css 的元素上使用悬停效果?

如何在下拉菜单上添加悬停效果?

如何在悬停效果上更改div元素内的背景颜色?

如何在 CSS 的同一行上对齐包含文本的 div 和包含图像的 div?

如何在将鼠标悬停在 div 上时更改元素的属性

如何在同一行/行 HTML 上放置 <div>

如何在同一个弹出窗口中显示多个不同的 div?