Question

我正在制作一个网站，我已经在主徽标下方的顶部订购了链接，目前我在菜单下面有两个hr标签：

<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<hr align="left" width="100%" color="#a2a2a2">
<hr align="left" width="100%" color="#a2a2a2">

我想要发生的是当我将鼠标悬停在某个链接上时，例如链接1，其中一条线从该链接下方消失，同时仍在其他6个链接下。

我确信有办法做到这一点，但我对HTML和CSS相对较新。

修改

我要问的是，当我选择链接时，例如链接1，只有一个<hr>标记而不是两个，并在其他链接上保留两个<hr>标记

Answer 1

主要思想是在锚点上添加悬停事件，如：

string2

希望这有帮助。

$( "li a" ).hover(
  function() {
    //When hovering
  }, function() {
    //When loosing hover
  }
);

$( "li a" ).hover(
  function() {
    $( 'hr:eq(0)' ).hide();
  }, function() {
    $( 'hr:eq(0)' ).show();
  }
);

Answer 2

您是说在列表中的每个链接下有2个<hr>吗？如果是这种情况，这里有一个关于如何使用jQuery在hovered链接下隐藏一个<hr>的示例。

＆＃13;

var $links = $('li > a');
$links.hover(function() {
    $(this).parent().find('hr:last').css('opacity', 0);
}, function() {
    $(this).parent().find('hr:last').css('opacity', 1);
});

＆＃13;

hr {
  transition: opacity .3s;
}
li {
  display: inline-block;
  float: left;
}
li a {
  padding: 0 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <a href="#">Link 1</a>
  <hr align="left" width="100%" color="#a2a2a2">
  <hr align="left" width="100%" color="#a2a2a2">
</li>
<li>
  <a href="#">Link 2</a>
  <hr align="left" width="100%" color="#a2a2a2">
  <hr align="left" width="100%" color="#a2a2a2">
</li>
<li>
  <a href="#">Link 3</a>
  <hr align="left" width="100%" color="#a2a2a2">
  <hr align="left" width="100%" color="#a2a2a2">
</li>
<li>
  <a href="#">Link 4</a>
  <hr align="left" width="100%" color="#a2a2a2">
  <hr align="left" width="100%" color="#a2a2a2">
</li>
<li>
  <a href="#">Link 5</a>
  <hr align="left" width="100%" color="#a2a2a2">
  <hr align="left" width="100%" color="#a2a2a2">
</li>
<li>
  <a href="#">Link 6</a>
  <hr align="left" width="100%" color="#a2a2a2">
  <hr align="left" width="100%" color="#a2a2a2">
</li>
<li>
  <a href="#">Link 7</a>
  <hr align="left" width="100%" color="#a2a2a2">
  <hr align="left" width="100%" color="#a2a2a2">
</li>

＆＃13;

在这里，没有Javascript / jQuery大致相同的事情

＆＃13;

hr {
  transition: opacity .3s;
}
li {
  display: inline-block;
  float: left;
}
li a {
  padding: 0 10px;
}
li:hover hr:last-of-type {
  opacity: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <a href="#">Link 1</a>
  <hr align="left" width="100%" color="#a2a2a2">
  <hr align="left" width="100%" color="#a2a2a2">
</li>
<li>
  <a href="#">Link 2</a>
  <hr align="left" width="100%" color="#a2a2a2">
  <hr align="left" width="100%" color="#a2a2a2">
</li>
<li>
  <a href="#">Link 3</a>
  <hr align="left" width="100%" color="#a2a2a2">
  <hr align="left" width="100%" color="#a2a2a2">
</li>
<li>
  <a href="#">Link 4</a>
  <hr align="left" width="100%" color="#a2a2a2">
  <hr align="left" width="100%" color="#a2a2a2">
</li>
<li>
  <a href="#">Link 5</a>
  <hr align="left" width="100%" color="#a2a2a2">
  <hr align="left" width="100%" color="#a2a2a2">
</li>
<li>
  <a href="#">Link 6</a>
  <hr align="left" width="100%" color="#a2a2a2">
  <hr align="left" width="100%" color="#a2a2a2">
</li>
<li>
  <a href="#">Link 7</a>
  <hr align="left" width="100%" color="#a2a2a2">
  <hr align="left" width="100%" color="#a2a2a2">
</li>

＆＃13;

Answer 3

你可以这样做，使用伪元素

<ul>
  <li>
    <a href="#">Link 1</a>
  </li><li>
    <a href="#">Link 2</a>
  </li><li>
    <a href="#">Link 3</a>
  </li><li>
    <a href="#">Link 4</a>
  </li><li>
    <a href="#">Link 5</a>
  </li><li>
    <a href="#">Link 6</a>
  </li><li>
    <a href="#">Link 7</a>
  </li>
</ul>

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        var checkBoxColumn = (DataGridViewCheckBoxColumn)this.dataGridView1.Columns[0];
        checkBoxColumn.TrueValue = true;
        checkBoxColumn.FalseValue = false;

        this.dataGridView1.CellContentClick += new DataGridViewCellEventHandler(dataGridView1_CellContentClick);
        this.dataGridView1.CellValueChanged += new DataGridViewCellEventHandler(dataGridView1_CellValueChanged);
    }

    private void dataGridView1_CellValueChanged(object sender, DataGridViewCellEventArgs e)
    {
        DataGridViewCheckBoxCell cell = (sender as DataGridView).Rows[e.RowIndex].Cells[e.ColumnIndex] as DataGridViewCheckBoxCell;

        if (cell != null)
        {
            if (cell.Value == cell.TrueValue)
            {
                MessageBox.Show("Cell checked.");
            }
            else
            {
                MessageBox.Show("Cell unchecked.");
            }
        }
    }

    private void dataGridView1_CellContentClick(object sender, DataGridViewCellEventArgs e)
    {
        var dataGridView = sender as DataGridView;

        if (dataGridView.Columns[e.ColumnIndex] is DataGridViewCheckBoxColumn)
        {
            // Raise CellValueChanged
            dataGridView.CommitEdit(DataGridViewDataErrorContexts.Commit);
        }
    }
}

在

3 个答案: