Question

In this plunk我有一个div，该div的底部边框可调整大小（使用jQueryUI）。我需要的是在鼠标悬停时更改底部边框的颜色。请注意，当div悬停在其他边框上时，底部边框的颜色不应更改。

鼠标悬停事件在元素级别而不是边界级别起作用，因此我不确定是否可以实现。有什么想法吗？

HTML

<div class="div2"></div>

JavaScript

  $(".div2").resizable({ 
    handles: "s"
  });

Answer 1

您可以使用伪元素。

您创建要在悬停时显示的边框，将其相对于手柄放置，并将其设置为透明，直到将其悬停在上面：

Updated plunker

Relevent CSS：

  .ui-resizable-handle:after {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background: transparent;
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
  }

  .ui-resizable-handle:hover:after {
    background: blue;
  }

Answer 2

快速的css hack可能会完成此任务-悬停样式更改了鼠标悬停时的底部边框，然后在调整大小时激活将其切换回原始颜色。

.div2:hover {
  border-bottom-color: green;
}

.div2:active {
  border-bottom-color: solid orange;
}

Answer 3

您也许可以尝试像这样简单的事情

//

$xml = <<<XML
<myXml>
<Person>
  <firstName>pradeep</firstName>
  <lastName>jain</lastName>
  <address>
    <doorNumber>287</doorNumber>
    <street>2nd block</street>
    <city>bangalore</city>
  </address>
  <phoneNums type="mobile">9980572765</phoneNums>
  <phoneNums type="landline">080 42056434</phoneNums>
  <phoneNums type="skype">123456</phoneNums>
</Person>
<Person>
  <firstName>pradeep</firstName>
  <lastName>jain</lastName>
  <address>
    <doorNumber>287</doorNumber>
    <street>2nd block</street>
    <city>bangalore</city>
  </address>
  <phoneNums type="mobile">1</phoneNums>
  <phoneNums type="landline">2</phoneNums>
  <phoneNums type="skype">3</phoneNums>
</Person>
</myXml>
XML;

$dom = new DOMDocument; 
$dom->loadXML($xml);  // <-- you'll need to import your file instead of a string as demo'ed here
$xpath = new DOMXPath($dom);
echo count($xpath->evaluate("//phoneNums")) , "\n";  // 6
echo count($xpath->evaluate("//street")) , "\n";  // 2
echo count($xpath->evaluate("//myXml")) , "\n";  // 1
echo count($xpath->evaluate("//Person")) , "\n";  // 2
echo count($xpath->evaluate("//person")) , "\n";  // 0 <-- case-sensitive

悬停时更改底部边框的颜色

3 个答案: