标签: hover

我正在摆弄 WordPress 导航。我有一个导航，在悬停状态下，每个 li 项目的背景变为橙色，文本从黑色变为白色。

看起来有 3 种颜色。如果没有悬停<a>，则为黑色，当<li>项目悬停在<a>标签上时，文本为灰色，当您将鼠标悬停在标签中间时<a>，文本的颜色为白色。

锚文本应该有两种颜色：默认为黑色，悬停时为白色。我需要停止灰色，以便当橙色被激活时，白色文本也被激活。

此 WordPress 站点中有几段可能相关的代码。我猜测下面这些，但看不到我将在哪里编辑这个特定问题。如果有人可以提供一个指针，该网站就在这里，我什至不确定我应该尝试选择什么：

tinyurl.com/m562wgd

/*     2.2.1 Top Drop-down menu */
    .dropdown ul,
    .dropdown ul li,
    .dropdown ul ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

和

.dropdown ul li {
  float: left;
  min-height: 1px;
  line-height: 1.3em;
  vertical-align: middle;
}
.dropdown ul li.hover,
.dropdown ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}

我有一个表，并且有一个用于 tr:hover 效果的全局 css 代码。但有时我不想在我的桌子上使用这种悬停效果。请查看代码并告诉我如何不在该表上运行效果。JSFIDDLE。这里有一个css id。它的名称是产品表。我没有清除这个CSS。IT 规则。

#product-table > tbody > tr { cursor:pointer; }
#product-table > tbody > tr:hover { background:#eee; }

.nohover > tbody > tr { cursor:default !important; }
.nohover > tbody > tr:hover { background:inherit !important; }

.green_bg { background-color:#090; }

我在 a 中有三个彩色框div，所有颜色都不同，当我hover在这些框中的任何一个上时，我必须使background-color父div框的颜色与悬停在其上的内框的颜色相同。

CSS：

 .t1_colors {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    border: 1px solid rgb(111,61,69);
    }

HTML：

<div id="task1" class="task">
    <h2>Task 1</h2>
    <p>Change the background color, of the div that     contains this task, to the color in each box when the box is hovered over.</p>
    <p>When the mouse stops hovering over the box, change the background color back to white.</p>
    <div id="t1_color_one" class="t1_colors" style="background: goldenrod;"></div>
    <div id="t1_color_two" class="t1_colors" style="background: …

我想当我将鼠标悬停在某些文本上时显示图片。所以，基本上，当我将鼠标悬停在文本上时，我想显示/弹出图像。

我在任何网站上都找不到任何好的解决方案，所以我希望能得到一些帮助。我没有任何代码要发布，因为我不知道从哪里开始，除此之外：

<style>
p:hover{
   //Show image code;
}
</style>

这是 HTML 正文中唯一的内容：

    <div id="box">
        <p id="text"> Enter The Disco! </p>
    </div>

这是我与该问题相关的CSS：

#box:hover{
    -webkit-transform:rotate(360deg);
    opacity:1;
    background-image:url("Logo.jpg");
    width:428px;
    height:208px;
    font-size:38px;
}
#text:hover{
    padding:18% 0% 0% 0%;
    color:red;
}

我想做的是，当我将鼠标悬停在 div 上时，使 div 内的文本消失，我该怎么做？它已经旋转并改变背景，但我只想文本在完成动画后消失。

我在 HTML 中有此代码。整个部分在 id="main-slider" 中。除非我单击箭头，否则轮播不会滑动，然后它就可以完美运行。我面临的另一个问题是滑块是整页滑块。默认情况下，引导程序在悬停时停止滑动。我不希望这种效果发生。为了解决这两个问题，我给了 jQuery 函数来覆盖它，但似乎没有任何效果。在花了 6 个小时阅读并尝试了 Github 和这个地方的几乎所有内容之后，终于决定在这里寻求帮助。

    <section id="main-slider">
    <div class="carousel slide">
      <ol class="carousel-indicators ">
        <li class="active" data-slide-to="0" data-target="#main-slider"></li>
        <li data-slide-to="1" data-target="#main-slider"></li>
        <li data-slide-to="2" data-target="#main-slider"></li>
        <li data-slide-to="3" data-target="#main-slider"></li>
      </ol>
    <div class="carousel-inner">
      <div class="item active" style="background-image: url(images/slider1.jpg)">
        <div class="container">
          <div class="row">
            <div class="col-sm-12">
              <div class="carousel-content centered">
                <div class="center" id="text-position"> <!-- self defined class in css-->
                  <h2></h2>
                    <p></p>
                      <a class="btn btn-md-primary></a>
                </div> <!-- /center -->
              </div> <!-- /carousel-content -->
            </div> <!-- /col-sm -->
          </div> <!-- /row -->
        </div> …

我有一行带有图标字体（Font Awesome）。在悬停时，我希望字体大小增加（更大的图标），同时将图标保持在线（水平和垂直）内居中，其余图标应保持其大小和位置。

HTML：

<div id="container" class="class1">
<span class="fa fa-square-o class2"></span>
<span class="fa fa-square-o class2"></span>
<span class="fa fa-square-o class2"></span>
<span class="fa fa-square-o class2"></span>
</div>

CSS：

.class1 {
    font-size:2em;
    line-height:2em;
}
.class2:hover {
    font-size:1.2em;
}

JSFiddle：http : //jsfiddle.net/8LLtg5sf/2/

我找不到保证金等的正确设置。帮助！

我正在寻找创建一个 CSS 悬停效果，我知道它一定是可能的，但我无法解决它，并且想知道是否有一些明亮的火花能够为我指明正确的方向！

在此处查看此图像，显示我想要实现的目标

因此，图像上方 div 中的某些文本会显示出来，但是当您将鼠标悬停在图像/文本 div 上时，内容会以平滑的方式向上移动

这会与 -webkit-transition translateY 元素一起使用吗？

预先感谢您提供的任何建议或指南！亚当

如果用户悬停在边界上（或靠近边界），我想做出反应。

我有一个 ERD / UML 图的表格，我想让用户有机会通过拖动表格边框来调整这个表格的大小。我正在使用 jQuery 和纯 JS。我的表格是矩形，它的位置是已知的（x1, x2, y1, y2, width , height ， (x1 | y1 ) 是左上角， (x2 | y2) 是右下角）。每个表都有类 "diagram" ，所以我想触发 ."diagram".hover 并检查鼠标位置，但这将是无效的。

我主要是在寻找想法，但简短的例子会很棒。

代码更新：http : //codepad.org/3xr8H39m

我有一个菜单，我想在悬停时更改链接颜色，但也将其所有同级更改为另一种颜色。没有JS这可能吗？

HTML：

<ul>
    <li>
        <a>lorem</a>
    </li>
    <li>
        <a>ipsum</a>
    </li>
</ul>

社会保障：

ul {
    $primary-color: orange;

    > li {
        > a {
            color: #000;
            border-bottom: solid 2px transparent;

            &:hover {
                color: $primary-color;
                border-color: $primary-color;

                & + a:not(:hover) {
                    color: red;
                }
            }
        }
    }
}