标签: hover

I want to use CSS to show div id='b' when I hover over div id='a', but I cannot figure out how to do it because the div 'a' is inside another div that div 'b' is not in.

<div id='content'>
     <div id='a'>
         Hover me
     </div>
</div>
<div id='b'>
    Show me
</div>

可以将悬停和点击功能合并为一个,例如:

点击:

$('#target').click(function() {
  // common operation
});

徘徊:

$('#target').hover(function () {
    // common operation
});

它们可以组合成一个功能吗？

谢谢!

有没有办法在仅使用css将鼠标悬停在另一个类的元素上时修改一个类的css？

就像是:

.item:hover .wrapper { /*some css*/ }

只有'包装'不在'项目'内,它在其他地方.

我真的不想使用javascript这么简单,但如果必须,我该怎么做？这是我失败的尝试:

document.getElementsByClassName('item')[0].onmouseover="document.getElementsByClassName('wrapper')[0].style.background="url('some url')";";

每个班级只有一个元素.不知道为什么他们在制作模板时没有使用ID,但这就是它的原因,我无法改变它.

[编辑]

这是一个菜单.每个菜单元素都有一个独特的类.当您将鼠标悬停在元素上时,子菜单会弹出到右侧.它就像一个叠加层,当我使用'Inspect Element'工具时,我可以看到整个网站html在子菜单处于活动状态时发生变化(意味着除了子菜单之外什么都没有).我称之为"包装器"的类具有控制子菜单背景的css.在这两个类之间我真的没有任何联系.

我有<a>个<span>孩子.我写了一些CSS,当父母悬停时会改变孩子们的边框颜色,但是当我悬停孩子时它也会改变边框颜色,这不应该.

a {
    padding: 50px;
    border: 1px solid black;
}

a span {
    position: absolute;
    top: 200px;
    padding: 30px;
    border: 10px solid green;
}

a:hover span {
    border: 10px solid red;
}   

<a>
    Parent text
    <span>Child text</span>    
</a>

我创建了一个小型按钮来显示而不是复选框.我想知道是否还有一种方法也有:悬停看起来不知何故？谢谢

http://jsfiddle.net/zAFND/2/

我需要禁用鼠标悬停在整个DOM中的特定按钮(而不是所有按钮)上.请让我知道如何使用CSS类实现它.

我的按钮被禁用时,我正在使用下面的CSS类.现在我想删除使用相同类的悬停效果.

.buttonDisabled
 {
 Cursor:text !important; Text-Decoration: None !important; 
 } 

上面的类将负责删除鼠标悬停时的手势和文本下划线.现在我想删除悬停效果.请告诉我.

当我将鼠标悬停在图像上时如何更改图像？

到目前为止我只有:

<Image Height="32" Source="/images/Save32.png" />

我的问题是，我有一个由三个 div 元素组成的维恩图，我想用 来缩放它们:hover，这样当我将鼠标悬停在交叉点上时，在交叉点中相遇的所有圆都会缩放到我定义的值。目前我只能缩放一个圆圈。

.circles-container {
  position: relative;
  width: 45.625rem;
  height: 45.625rem;
}

.circle-blue {
  position: absolute;
  left: 0rem;
  top: 0rem;
  width: 28.4375rem;
  height: 28.4375rem;
  background-color: rgba(187, 231, 254, 0.6);
  border-radius: 50%;
}

.circle-purple {
  position: absolute;
  right: 0rem;
  top: 0rem;
  width: 28.4375rem;
  height: 28.4375rem;
  background-color: rgba(211, 181, 229, 0.6);
  border-radius: 50%;
}

.circle-pink {
  position: absolute;
  right: 8.59375rem;
  left: 8.59375rem;
  bottom: 0rem;
  width: 28.4375rem;
  height: 28.4375rem;
  background-color: rgba(255, 212, 219, 0.6);
  border-radius: 50%;
}

.second-section-circle {
  transition: …

这是我的问题.
我有一个div包含另外两个divs:基本上一个用于标题,一个用于内容.

当用户将鼠标指向父级时,我想要减轻(改变alpha级别,或者欢迎其他一些方法)div.两个孩子的颜色divs应该改变,并变得轻微.如果可能的话,我想避免使用javascript.

如何在CSS中执行此操作？

所有,

我有一个ASP.NET GridView,呈现给HTML表.

<table>
    <tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
    <tr><td>Data 1</td><td>Data 2</td></tr>
    <tr><td>Data 3</td><td>Data 4</td></tr>
</table>

我想在鼠标悬停在它上面时突出显示该行 - 除了第一行是标题.

我刚刚用JQuery弄湿了,并且用CSS(CSS2或CSS3)稍微涉足了一下.有没有一种首选的方法呢？

任何人都可以给我一个起点吗？

干杯

Andez